| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>The AI Playground 🤖✨</title> |
| <style> |
| body { |
| font-family: Arial, sans-serif; |
| padding: 20px; |
| background-color: #f5f7fa; |
| } |
| h2 { |
| color: #333; |
| } |
| .container { |
| display: flex; |
| gap: 40px; |
| } |
| .block { |
| background: white; |
| border-radius: 10px; |
| padding: 20px; |
| flex: 1; |
| box-shadow: 0 0 8px rgba(0,0,0,0.1); |
| } |
| textarea, input, select, button { |
| width: 100%; |
| margin-top: 10px; |
| padding: 10px; |
| border-radius: 8px; |
| border: 1px solid #ccc; |
| } |
| button { |
| background: #007bff; |
| color: white; |
| font-weight: bold; |
| border: none; |
| cursor: pointer; |
| margin-top: 15px; |
| } |
| #response { |
| margin-top: 30px; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>The AI Playground 🤖✨</h2> |
| <div class="container"> |
| |
| <div class="block"> |
| <h3>Text-to-Image Wizard ✨</h3> |
| <input type="text" id="imagePrompt" placeholder="Imagine... e.g. car"> |
| <button onclick="sendRequest('image')">Summon Image</button> |
| </div> |
|
|
| |
| <div class="block"> |
| <h3>Global Translator 🌍</h3> |
| <input type="text" id="translationInput" placeholder="Say something in Tamil..."> |
| <button onclick="sendRequest('translation')">Translate!</button> |
| </div> |
| </div> |
|
|
| |
| <div class="block" style="margin-top: 30px;"> |
| <h3>Chat with the AI 💬</h3> |
| <input type="text" id="textPrompt" placeholder="Ask anything..."> |
| <button onclick="sendRequest('text')">Submit</button> |
| </div> |
|
|
| |
| <div id="response" class="block"></div> |
|
|
| <script> |
| function sendRequest(type) { |
| let message = ""; |
| if (type === 'image') { |
| message = document.getElementById('imagePrompt').value; |
| } else if (type === 'translation') { |
| message = document.getElementById('translationInput').value; |
| } else { |
| message = document.getElementById('textPrompt').value; |
| } |
| |
| fetch("/chat", { |
| method: "POST", |
| headers: { |
| "Content-Type": "application/json" |
| }, |
| body: JSON.stringify({ message: message, response_type: type }) |
| }) |
| .then(res => res.json()) |
| .then(data => { |
| document.getElementById("response").innerHTML = data.response; |
| }) |
| .catch(err => { |
| console.error("Error:", err); |
| document.getElementById("response").innerText = "Something went wrong."; |
| }); |
| } |
| </script> |
| </body> |
| </html> |
