Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Emoji generator</title> | |
| <link rel="preload" href="worker.js" /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;600;800&family=Noto+Color+Emoji&display=swap" | |
| rel="stylesheet" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div class="background" aria-hidden="true" aria-disabled="true"> | |
| <div class="background-blob-1"></div> | |
| <div class="background-blob-2"></div> | |
| <div class="background-blob-3"></div> | |
| </div> | |
| <div class="container"> | |
| <div id="main-container"> | |
| <h1 class="google-sans-medium">Emoji generator</h1> | |
| <p class="text-cta">Translate text to fun combinations of emoji with your own Gemma model ✨</p> | |
| <div class="input-container"> | |
| <input type="text" id="prompt-input" aria-label="Type any phrase and get suggestions" placeholder="Type any phrase and get suggestions"> | |
| <button disabled type="submit" id="generate-btn" aria-label="Generate emojis"> | |
| <svg class="arrow" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"> | |
| <path d="M.59 14.59 2 16l8-8-8-8L.59 1.41 7.17 8" fill="#fff" /> | |
| </svg> | |
| <svg class="loader" width="18" height="18" viewBox="0 0 18 18" fill="none" | |
| xmlns="http://www.w3.org/2000/svg"> | |
| <circle cx="9" cy="9" r="8" stroke="white" stroke-width="2" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="output-container"> | |
| <div id="response-output" class="response-box"></div> | |
| <div id="status-message">Loading model...</div> | |
| </div> | |
| </div> | |
| <div id="warning-message-mobile" style="display: none;"> | |
| <h3 class="google-sans-medium">Emoji generator</h3> | |
| <p class="warning-message-cta">This demo may not | |
| load correctly on | |
| mobile devices.</p> | |
| <p class="warning-message-cta-alt">Please open it on desktop 💻</p> | |
| <p class="warning-message-cta-alt">or</p> | |
| <a class="warning-message-cta-alt" id="proceed-anyway-btn">proceed anyway.</a> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <p>Powered by <a href="https://goo.gle/hf-gemma-3-270m-it" target="_blank">Gemma 3 270M</a> and <a href="https://ai.google.dev/edge/mediapipe/" target="_blank">MediaPipe</a></p> | |
| <a href="https://goo.gle/emoji-gemma-cookbook" target="_blank">View on GitHub<svg fill="none" xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 7 12"> | |
| <path d="m.06 10.4.94.93L6.33 6 1 .67l-.94.94L4.45 6" fill="#327AC3" /> | |
| </svg></a> | |
| </div> | |
| <script type="module" src="script.js"></script> | |
| </body> | |
| </html> | |