*index.html*
<!DOCTYPE html>
<html lang="en">
<head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"6ac78479107d7855174e3e71"}};</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>AI Mood Detector</title>

    <link rel="stylesheet" href="style.css">
<meta property="og:title" content="StudyPilot"><meta property="og:description" content="Your AI-powered study companion "><meta property="og:image" content="https://cdn-thumbnails.huggingface.co/social-thumbnails/spaces/Marab-Imran65/StudyPilot.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="https://cdn-thumbnails.huggingface.co/social-thumbnails/spaces/Marab-Imran65/StudyPilot.png"></head>

<body>

    <div class="container">

        <div class="card">

            <div class="badge">AI POWERED</div>

            <h1>😊 AI Mood Detector</h1>

            <p class="subtitle">
                Enter a sentence and discover the mood behind your words.
            </p>

            <textarea
                id="textInput"
                placeholder="Example: I am really excited about my new project!"
            ></textarea>

            <button id="detectBtn">
                Detect Mood
            </button>

            <p id="status"></p>

            <div id="result" class="hidden">

                <div class="mood-box">

                    <div class="small-title">
                        DETECTED MOOD
                    </div>

                    <div id="moodEmoji" class="emoji">
                        😊
                    </div>

                    <h2 id="mood">
                        —
                    </h2>

                    <p id="confidence">
                        Confidence: —
                    </p>

                </div>


                <div class="scores">

                    <h3>Emotion Scores</h3>

                    <div id="scoreList"></div>

                </div>

            </div>


            <div class="examples">

                <h3>Try an Example</h3>

                <button
                    class="example"
                    data-text="I am so happy today! Everything is going perfectly."
                >
                    😊 Happy
                </button>

                <button
                    class="example"
                    data-text="I am worried about my upcoming exam."
                >
                    😨 Worried
                </button>

                <button
                    class="example"
                    data-text="I am extremely angry about what happened."
                >
                    😡 Angry
                </button>

                <button
                    class="example"
                    data-text="I feel sad and lonely today."
                >
                    😢 Sad
                </button>

                <button
                    class="example"
                    data-text="Wow! I cannot believe I got selected!"
                >
                    😮 Surprised
                </button>

            </div>

        </div>

        <footer>
            AI Mood Detector • Hugging Face Static Space
        </footer>

    </div>


    <script src="script.js"></script>

</body>
</html>
*script.js*
const textInput =
    document.getElementById("textInput");

const detectBtn =
    document.getElementById("detectBtn");

const result =
    document.getElementById("result");

const moodElement =
    document.getElementById("mood");

const confidenceElement =
    document.getElementById("confidence");

const moodEmoji =
    document.getElementById("moodEmoji");

const scoreList =
    document.getElementById("scoreList");

const status =
    document.getElementById("status");


// -----------------------------------
// MOOD KEYWORDS
// -----------------------------------

const emotions = {

    happy: {
        emoji: "😊",

        words: [
            "happy",
            "happiness",
            "joy",
            "joyful",
            "excited",
            "exciting",
            "great",
            "awesome",
            "wonderful",
            "love",
            "loved",
            "lovely",
            "amazing",
            "excellent",
            "glad",
            "pleased",
            "success",
            "successful",
            "win",
            "won",
            "celebrate",
            "celebration",
            "smile",
            "smiling"
        ]
    },


    sad: {
        emoji: "😢",

        words: [
            "sad",
            "sadness",
            "unhappy",
            "lonely",
            "loneliness",
            "cry",
            "crying",
            "tears",
            "depressed",
            "hurt",
            "heartbroken",
            "miss",
            "missing",
            "loss",
            "lost"
        ]
    },


    angry: {
        emoji: "😡",

        words: [
            "angry",
            "anger",
            "mad",
            "furious",
            "hate",
            "hated",
            "annoyed",
            "annoying",
            "frustrated",
            "frustrating",
            "rage",
            "rude",
            "stupid",
            "disappointed"
        ]
    },


    fear: {
        emoji: "😨",

        words: [
            "afraid",
            "fear",
            "fearful",
            "scared",
            "scary",
            "worried",
            "worry",
            "anxious",
            "anxiety",
            "nervous",
            "panic",
            "danger",
            "dangerous",
            "terrified"
        ]
    },


    surprise: {
        emoji: "😮",

        words: [
            "surprised",
            "surprise",
            "shocked",
            "shock",
            "wow",
            "unexpected",
            "unbelievable",
            "amazed",
            "suddenly"
        ]
    },


    disgust: {
        emoji: "🤢",

        words: [
            "disgusted",
            "disgusting",
            "disgust",
            "gross",
            "nasty",
            "revolting"
        ]
    },


    neutral: {
        emoji: "😐",

        words: []
    }

};


// -----------------------------------
// CLEAN TEXT
// -----------------------------------

function cleanText(text) {

    return text
        .toLowerCase()
        .replace(/[^\w\s']/g, " ");

}


// -----------------------------------
// CALCULATE MOOD
// -----------------------------------

function calculateScores(text) {

    const clean =
        cleanText(text);

    const scores = {};


    for (
        const emotion in emotions
    ) {

        let score = 0;


        for (
            const word
            of emotions[emotion].words
        ) {

            if (
                clean.includes(word)
            ) {

                score++;
            }

        }


        scores[emotion] =
            score;
    }


    const total =
        Object.values(scores)
            .reduce(
                (a, b) => a + b,
                0
            );


    if (total === 0) {

        scores.neutral = 1;

    }


    return scores;

}


// -----------------------------------
// CONVERT SCORES TO PERCENTAGE
// -----------------------------------

function convertToPercentages(scores) {

    const total =
        Object.values(scores)
            .reduce(
                (a, b) => a + b,
                0
            );


    const percentages = {};


    for (
        const emotion in scores
    ) {

        percentages[emotion] =
            (
                scores[emotion]
                /
                total
            ) * 100;

    }


    return percentages;

}


// -----------------------------------
// DETECT MOOD
// -----------------------------------

function detectMood() {

    const text =
        textInput.value.trim();


    if (!text) {

        status.textContent =
            "Please enter some text first.";

        result.classList.add(
            "hidden"
        );

        return;

    }


    status.textContent =
        "Analyzing your text...";


    setTimeout(() => {

        const rawScores =
            calculateScores(text);


        const scores =
            convertToPercentages(
                rawScores
            );


        const sorted =
            Object.entries(scores)
                .sort(
                    (a, b) =>
                        b[1] - a[1]
                );


        const topEmotion =
            sorted[0][0];


        const topScore =
            sorted[0][1];


        // Main result

        moodElement.textContent =
            topEmotion
                .charAt(0)
                .toUpperCase()
            +
            topEmotion.slice(1);


        moodEmoji.textContent =
            emotions[topEmotion].emoji;


        confidenceElement.textContent =
            "Confidence: "
            +
            topScore.toFixed(1)
            +
            "%";


        // Emotion scores

        scoreList.innerHTML = "";


        sorted.forEach(
            ([emotion, score]) => {

                const row =
                    document.createElement(
                        "div"
                    );


                row.className =
                    "score-row";


                row.innerHTML = `

                    <div class="score-header">

                        <span>
                            ${emotions[emotion].emoji}
                            ${emotion
                                .charAt(0)
                                .toUpperCase()
                                +
                                emotion.slice(1)}
                        </span>

                        <span>
                            ${score.toFixed(1)}%
                        </span>

                    </div>


                    <div class="bar">

                        <div
                            class="fill"
                            style="width:${score}%"
                        ></div>

                    </div>

                `;


                scoreList.appendChild(
                    row
                );

            }
        );


        result.classList.remove(
            "hidden"
        );


        status.textContent = "";


    }, 400);

}


// -----------------------------------
// BUTTON
// -----------------------------------

detectBtn.addEventListener(
    "click",
    detectMood
);


// -----------------------------------
// EXAMPLE BUTTONS
// -----------------------------------

document
    .querySelectorAll(".example")
    .forEach(button => {

        button.addEventListener(
            "click",
            () => {

                textInput.value =
                    button.dataset.text;

                detectMood();

            }
        );

    });


// Ctrl + Enter

textInput.addEventListener(
    "keydown",
    event => {

        if (
            event.ctrlKey &&
            event.key === "Enter"
        ) {

            detectMood();

        }

    }
);
*style.css*
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        linear-gradient(
            135deg,
            #667eea,
            #764ba2
        );

    color: #222;
}


.container {
    width: min(900px, 92%);

    margin: auto;

    padding:
        45px
        0
        25px;
}


.card {
    background: white;

    border-radius: 24px;

    padding: 38px;

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.25);
}


.badge {
    display: inline-block;

    background: #eeeeff;

    color: #5b5bd6;

    padding:
        7px
        14px;

    border-radius: 30px;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 1px;
}


h1 {
    margin:
        15px
        0
        8px;

    font-size: 38px;
}


.subtitle {
    color: #666;

    margin-bottom: 25px;

    font-size: 16px;
}


textarea {
    width: 100%;

    min-height: 150px;

    resize: vertical;

    padding: 17px;

    border:
        2px solid
        #e4e4e4;

    border-radius: 14px;

    font-size: 16px;

    outline: none;
}


textarea:focus {
    border-color: #667eea;
}


#detectBtn {
    width: 100%;

    margin-top: 15px;

    padding: 15px;

    border: none;

    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            #667eea,
            #764ba2
        );

    color: white;

    font-size: 17px;

    font-weight: bold;

    cursor: pointer;
}


#detectBtn:hover {
    opacity: 0.9;
}


#status {
    text-align: center;

    margin-top: 15px;

    color: #666;
}


.hidden {
    display: none;
}


#result {
    margin-top: 25px;
}


.mood-box {
    text-align: center;

    background: #f6f7ff;

    border-radius: 18px;

    padding: 25px;
}


.small-title {
    color: #777;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 1px;
}


.emoji {
    font-size: 60px;

    margin:
        10px
        0;
}


#mood {
    margin: 0;

    font-size: 30px;
}


#confidence {
    color: #666;
}


.scores {
    margin-top: 25px;
}


.scores h3 {
    margin-bottom: 15px;
}


.score-row {
    margin-bottom: 14px;
}


.score-header {
    display: flex;

    justify-content: space-between;

    margin-bottom: 6px;

    font-size: 14px;
}


.bar {
    height: 10px;

    background: #e9e9ee;

    border-radius: 10px;

    overflow: hidden;
}


.fill {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #667eea,
            #764ba2
        );

    border-radius: 10px;

    transition:
        width 0.5s ease;
}


.examples {
    margin-top: 30px;
}


.examples h3 {
    margin-bottom: 15px;
}


.example {
    border:
        1px solid
        #ddd;

    background: white;

    padding:
        9px
        14px;

    margin: 4px;

    border-radius: 20px;

    cursor: pointer;
}


.example:hover {
    background: #f2f3ff;
}


footer {
    text-align: center;

    color: white;

    margin-top: 18px;

    font-size: 13px;
}


@media (max-width: 600px) {

    .card {
        padding: 24px;
    }

    h1 {
        font-size: 30px;
    }

    .example {
        margin:
            3px
            0;
    }
}