AI Emoji Mood Detector Code

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <title>AI Emoji Mood Detector</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
            background-color: #222;
            color: #fff;
        }

        input,
        button {
            padding: 10px;
            font-size: 18px;
        }

        #emoji {
            font-size: 200px;
            margin-top: 10px;
        }

        .loader {
            width: 48px;
            height: 48px;
            display: block;
            margin: 80px auto;
            position: relative;
            border: 3px solid #FFF;
            border-radius: 50%;
            box-sizing: border-box;
            animation: animloader 2s linear infinite;
        }

        .loader::after {
            content: '';
            box-sizing: border-box;
            width: 6px;
            height: 24px;
            background: #FFF;
            transform: rotate(-45deg);
            position: absolute;
            bottom: -20px;
            left: 46px;
        }

        @keyframes animloader {
            0% {
                transform: translate(-10px, -10px);
            }

            25% {
                transform: translate(-10px, 10px);
            }

            50% {
                transform: translate(10px, 10px);
            }

            75% {
                transform: translate(10px, -10px);
            }

            100% {
                transform: translate(-10px, -10px);
            }
        }
    </style>
</head>
<body>
    <h1>🎭 AI Emoji Mood Detector</h1>
    <p style="font-style: italic;">Type your message and see what emoji matches your mood!</p>
    <input type="text" id="userInput" placeholder="Type something..." size="40">
    <button onclick="detectMood()">Detect Mood</button>
    <div id="loader" style="display:none;">
        <span class="loader"></span>
    </div>
    <div id="prompt" style="margin-top: 15px;"></div>
    <div id="result"></div>
    <div id="emoji" class="animate__animated animate__pulse animate__infinite animate__slow"></div>
    <script>
        async function detectMood() {
            const inputElement = document.getElementById("userInput");
            const message = inputElement.value;
            if (!message.trim()) {
                alert("Please type a message!");
                return;
            }

            const apiKey = "YOUR_GEMINI_API_KEY"; // Replace with your Gemini API key

            document.getElementById("loader").style.display = "block";
            document.getElementById("prompt").innerHTML = `<b>Analyzing:</b> "${message}"`;
            document.getElementById("result").innerHTML = "";
            document.getElementById("emoji").innerText = "";

            try {
                const response = await fetch("https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=" + apiKey, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        contents: [{
                            parts: [{
                                text: `Analyze the sentiment of the following text and return the primary emotion as one of: joy, happiness, anger, sadness, fear, love, surprise, neutral. Text: "${message}"`
                            }]
                        }]
                    })
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }

                inputElement.value = "";

                const result = await response.json();
                const emotion = result.candidates[0].content.parts[0].text.trim();
                console.log(emotion);
                document.getElementById("result").innerHTML = `<br> Detected Emotion: <b>${emotion}</b>`;

                const emojiMap = {
                    "joy": "😊",
                    "happiness": "😁",
                    "anger": "😠",
                    "sadness": "😢",
                    "fear": "😨",
                    "love": "❤️",
                    "surprise": "😲",
                    "neutral": "😐"
                };

                const emoji = emojiMap[emotion.toLowerCase()] || "🎭";
                document.getElementById("emoji").innerText = emoji;

            } catch (error) {
                document.getElementById("result").innerHTML = "Error: " + error.message;
            } finally {
                document.getElementById("loader").style.display = "none";
            }
        }
    </script>
</body>
</html>
AI Emoji Mood Detector - Code
