first commit

app.py

@@ -0,0 +1,85 @@
+from flask import Flask, render_template, request, send_file
+from google import genai
+from google.genai import types
+import base64
+import os
+import io
+import unicodedata
+app = Flask(__name__)
+
+genai.Client(api_key=os.environ["GOOGLE_API_KEY"])
+
+def emoji_to_text(emoji):
+    try:
+        return unicodedata.name(emoji)
+    except ValueError:
+        return ""
+
+def is_emoji(text):
+    import re
+    emoji_pattern = re.compile(
+        "["
+        "\U0001F000-\U0001F9FF"
+        "\U0001F300-\U0001F5FF"
+        "\U00002702-\U000027B0"
+        "\U000024C2-\U0001F251" 
+        "]+", flags=re.UNICODE)
+    
+    return bool(emoji_pattern.fullmatch(text))
+
+
+def generate_creepy_emoji(emoji):
+    description = emoji_to_text(emoji)
+    client = genai.Client()
+    response = client.models.generate_content(
+        model="gemini-2.0-flash-exp-image-generation",
+        contents=(
+            f"""
+            Generate a hyper-realistic and highly detailed image of the {emoji} emoji. This image should depict a **realistic, textured**, and **wrinkled** version of the {description} emoji, transforming it into an unsettling and eerie representation.
+            If it is not a face emoji, add a face to the image. If it is a cat face emoji, make sure you include the cat aspects in the emoji
+            Plan out what you are going to generate before, make sure you understand what the emoji contains in itself.
+            Make sure you generate the image as well as the prompt
+
+            - **Facial Features**: The skin should appear aged, with deep wrinkles, pores, and imperfections, making it look as lifelike as possible.  
+            - **Texture & Detail**: The skin should have a hyper-detailed texture, including fine lines, blemishes, and realistic lighting effects to enhance the **creepy and unsettling** aesthetic.  
+            - **Color & Lighting**: Use **appropriate colors** (typically yellow for facial emojis), ensuring **shadows and highlights** enhance realism. The lighting should create an eerie atmosphere, possibly with unnatural or dim lighting to increase the unsettling effect.  
+            - **Mood & Style**: The image should evoke a sense of unease, making the emoji appear unnervingly lifelike, almost **uncanny valley** in effect.   
+            - **Follow Emoji**: Make sure that you follow all elements that should be in the emoji, like tears, laughing tears of joy, and other liquids, as well as other things. For example the smirking emoji should be smirking, not deadpan. The laughing emoji should have tears of joy, ect...
+            """
+        ),
+        config=types.GenerateContentConfig(
+            response_modalities=[
+                "image",
+                "text",
+            ],
+        ),
+    )
+
+    if response and response.candidates:
+        for candidate in response.candidates:
+            if candidate.content and candidate.content.parts:
+                for part in candidate.content.parts:
+                    if hasattr(part, "inline_data") and part.inline_data:
+                        return part.inline_data.data
+    return None
+
+@app.route("/", methods=["GET", "POST"])
+def index():
+    return render_template("index.html")
+
+@app.route("/generate", methods=["POST"])
+def generate():
+    emoji = request.form["emoji"]
+    if not is_emoji(emoji):
+        return {"error": "Please enter only emoji characters."}, 400
+    
+    image_data = generate_creepy_emoji(emoji)
+    if image_data:
+        encoded_image = base64.b64encode(image_data).decode('utf-8')
+        return {"image": f"data:image/png;base64,{encoded_image}"}
+    else:
+        return {"error": "No image generated."}, 400
+
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860)

requirements.txt

@@ -0,0 +1,2 @@
+flask
+google-generativeai

static/styles.css

@@ -0,0 +1,276 @@
+/* Refined Dark Midnight Blue Theme with Elegant Magical Accents */
+:root {
+    --midnight-blue: #0a0a1a;
+    --deep-blue: #131330;
+    --accent-purple: #9d4edd;
+    --accent-blue: #3a86ff;
+    --glow-purple: rgba(157, 78, 221, 0.3);
+    --glow-blue: rgba(58, 134, 255, 0.3);
+    --text-color: #e6e6ff;
+    --star-color: rgba(255, 255, 255, 0.4);
+    --container-bg: rgba(19, 19, 48, 0.85);
+  }
+  
+  body {
+    background-color: var(--midnight-blue);
+    color: var(--text-color);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    background-image: 
+      radial-gradient(var(--star-color) 1px, transparent 1px);
+    background-size: 80px 80px;
+    background-position: 0 0;
+    background-attachment: fixed;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .container {
+    background-color: var(--container-bg);
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 2.5rem;
+    max-width: 500px;
+    width: 90%;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
+                0 0 15px var(--glow-purple);
+    position: relative;
+    overflow: hidden;
+    border: 1px solid rgba(157, 78, 221, 0.1);
+  }
+  
+  .container::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, 
+      transparent, 
+      var(--accent-purple), 
+      var(--accent-blue), 
+      transparent
+    );
+  }
+  
+  h1 {
+    color: var(--text-color);
+    text-align: center;
+    margin-bottom: 2rem;
+    font-size: 2.8rem;
+    letter-spacing: 2px;
+    font-weight: 700;
+    background: linear-gradient(120deg, #e6e6ff, var(--accent-purple), var(--accent-blue), #e6e6ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 300% 100%;
+    animation: gradient-shift 8s ease infinite;
+    position: relative;
+  }
+  
+  @keyframes gradient-shift {
+    0%, 100% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+  }
+  
+  form {
+    position: relative;
+    z-index: 1;
+  }
+  
+  label {
+    display: block;
+    margin-bottom: 0.8rem;
+    font-size: 1.1rem;
+    color: var(--accent-purple);
+    letter-spacing: 0.5px;
+    font-weight: 500;
+    opacity: 0.9;
+  }
+  
+  input[type="text"] {
+    width: 100%;
+    padding: 0.9rem;
+    border: 2px solid rgba(58, 134, 255, 0.2);
+    border-radius: 12px;
+    background-color: rgba(10, 10, 26, 0.5);
+    color: var(--text-color);
+    font-size: 2rem;
+    box-sizing: border-box;
+    transition: all 0.25s ease;
+    text-align: center;
+    margin-bottom: 1.2rem;
+    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
+  }
+  
+  input[type="text"]:focus {
+    outline: none;
+    border-color: var(--accent-purple);
+    box-shadow: 0 0 0 3px var(--glow-purple), 
+                inset 0 2px 5px rgba(0, 0, 0, 0.1);
+  }
+  
+  button {
+    display: block;
+    width: 100%;
+    padding: 0.9rem;
+    background: linear-gradient(135deg, 
+      rgba(58, 134, 255, 0.9), 
+      rgba(157, 78, 221, 0.9)
+    );
+    border: none;
+    border-radius: 12px;
+    color: white;
+    font-size: 1.1rem;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(157, 78, 221, 0.3);
+  }
+  
+  button::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, 
+      transparent, 
+      rgba(255, 255, 255, 0.1), 
+      transparent
+    );
+    transform: translateX(-100%);
+    transition: transform 0.6s ease;
+  }
+  
+  button:hover::after {
+    transform: translateX(100%);
+  }
+  
+  button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 15px rgba(157, 78, 221, 0.4);
+  }
+  
+  button:active {
+    transform: translateY(1px);
+  }
+  
+  #result-container {
+    margin-top: 2.5rem;
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    z-index: 1;
+  }
+  
+  #loading {
+    display: none;
+    text-align: center;
+    width: 100%;
+  }
+  
+  .loading-bar {
+    height: 4px;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    background-color: rgba(157, 78, 221, 0.2);
+    border-radius: 2px;
+    margin: 1.5rem 0;
+  }
+  
+  .loading-bar::before {
+    content: "";
+    position: absolute;
+    left: -50%;
+    height: 100%;
+    width: 50%;
+    background: linear-gradient(90deg, 
+      transparent, 
+      var(--accent-purple), 
+      var(--accent-blue)
+    );
+    animation: loading 1.5s infinite ease;
+    border-radius: 2px;
+  }
+  
+  @keyframes loading {
+    0% {
+      left: -50%;
+    }
+    100% {
+      left: 100%;
+    }
+  }
+  
+  .loading-text {
+    font-size: 1rem;
+    letter-spacing: 0.5px;
+    color: rgba(230, 230, 255, 0.8);
+    margin-bottom: 0.5rem;
+  }
+  
+  .emoji-result {
+    max-width: 100%;
+    border-radius: 15px;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3),
+                0 0 20px var(--glow-blue);
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  
+  .emoji-result:hover {
+    transform: scale(1.03);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4),
+                0 0 25px var(--glow-purple);
+  }
+  
+  .error-message {
+    color: #ff6b8b;
+    text-align: center;
+    font-size: 1rem;
+    background-color: rgba(255, 107, 139, 0.08);
+    padding: 0.9rem 1.2rem;
+    border-radius: 10px;
+    border-left: 3px solid rgba(255, 107, 139, 0.5);
+    margin-top: 0.5rem;
+  }
+  
+  /* Subtle pulsing glow on container */
+  @keyframes subtle-pulse {
+    0%, 100% {
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
+                  0 0 15px var(--glow-purple);
+    }
+    50% {
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
+                  0 0 20px var(--glow-blue);
+    }
+  }
+  
+  .container {
+    animation: subtle-pulse 8s infinite ease-in-out;
+  }
+  
+  /* Responsive adjustments */
+  @media (max-width: 500px) {
+    .container {
+      padding: 2rem;
+    }
+    
+    h1 {
+      font-size: 2.2rem;
+    }
+  }

templates/index.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Creepmoji</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+    <div class="container">
+        <h1>Creepmoji</h1>
+        <form id="emoji-form">
+            <label for="emoji">Enter Emoji:</label>
+            <input type="text" id="emoji" name="emoji" maxlength="2" placeholder="😀" autocomplete="off">
+            <button type="submit">Generate Creepmoji</button>
+        </form>
+        
+        <div id="result-container">
+            <div id="loading">
+                <div class="loading-text">Creating your masterpiece...</div>
+                <div class="loading-bar"></div>
+            </div>
+            <div id="emoji-display"></div>
+        </div>
+    </div>
+
+    <script>
+        // Client-side emoji validation
+        document.getElementById('emoji').addEventListener('input', function(e) {
+            let value = e.target.value;
+            // Keep only emoji characters
+            const emojiRegex = /[\p{Emoji}]/gu;
+            const emojis = value.match(emojiRegex);
+            
+            if (emojis) {
+                e.target.value = emojis.join('');
+            } else {
+                e.target.value = '';
+            }
+            
+            // Limit to a single emoji
+            if (e.target.value.length > 2) {
+                e.target.value = e.target.value.slice(0, 2);
+            }
+        });
+
+        document.getElementById('emoji-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            const emoji = document.getElementById('emoji').value.trim();
+            if (!emoji) {
+                document.getElementById('emoji-display').innerHTML = '<div class="error-message">Please enter an emoji.</div>';
+                return;
+            }
+            
+            // Show loading indicator
+            document.getElementById('loading').style.display = 'block';
+            document.getElementById('emoji-display').innerHTML = '';
+            
+            // Get form data
+            const formData = new FormData(this);
+            
+            // Send AJAX request
+            fetch('/generate', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                // Hide loading indicator
+                document.getElementById('loading').style.display = 'none';
+                
+                if (data.error) {
+                    document.getElementById('emoji-display').innerHTML = `<div class="error-message">${data.error}</div>`;
+                } else {
+                    // Display the image with a fade-in effect
+                    const img = document.createElement('img');
+                    img.src = data.image;
+                    img.className = 'emoji-result';
+                    img.alt = 'Creepy Emoji';
+                    img.style.opacity = '0';
+                    document.getElementById('emoji-display').appendChild(img);
+                    
+                    // Trigger fade-in effect
+                    setTimeout(() => {
+                        img.style.transition = 'opacity 0.6s ease';
+                        img.style.opacity = '1';
+                    }, 50);
+                }
+            })
+            .catch(error => {
+                document.getElementById('loading').style.display = 'none';
+                document.getElementById('emoji-display').innerHTML = `<div class="error-message">Error: ${error}</div>`;
+            });
+        });
+    </script>
+</body>
+</html>