Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Face Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="tailwind.config.js"></script> | |
| <script src="script.js" defer></script> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8"> | |
| <h1 class="text-4xl font-bold text-center text-indigo-600 mb-12">AI Face Generator</h1> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6 text-center">How it works</h2> | |
| <div class="flex flex-col md:flex-row items-center justify-center gap-8"> | |
| <div class="text-center"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Reference Image</h3> | |
| <img src="https://picfy.xyz/api/taylor.webp" alt="Reference Image Example" | |
| class="rounded-lg shadow-lg max-w-[300px] w-full"> | |
| </div> | |
| <div class="text-4xl text-indigo-600 font-bold hidden md:block">→</div> | |
| <div class="text-4xl text-indigo-600 font-bold md:hidden">↓</div> | |
| <div class="text-center"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Generated Result</h3> | |
| <img src="https://picfy.xyz/api/generated_images/679b6f0d954c5.png" alt="Generated Image Example" | |
| class="rounded-lg shadow-lg max-w-[300px] w-full"> | |
| <p class="mt-3 text-gray-600 italic">"as a robotic"</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex flex-col sm:flex-row gap-4 items-start sm:items-center"> | |
| <input type="password" id="apiKey" placeholder="Enter your RapidAPI Key" | |
| class="flex-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <button onclick="saveApiKey()" | |
| class="w-full sm:w-auto px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"> | |
| Save API Key | |
| </button> | |
| </div> | |
| <div class="mt-4 text-sm text-gray-600"> | |
| Get your API key from: | |
| <a href="https://rapidapi.com/projectunpack/api/text-to-image-api-with-face/pricing" | |
| target="_blank" | |
| class="text-indigo-600 hover:text-indigo-800 transition-colors">RapidAPI</a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="space-y-4 mb-8"> | |
| <input type="text" id="referenceImageUrl" placeholder="Reference Image URL" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <input type="text" id="prompt" placeholder="Enter your prompt" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <select id="imageSize" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="square_hd">Square HD</option> | |
| <option value="portrait_4_3">Portrait 4:3</option> | |
| <option value="portrait_16_9">Portrait 16:9</option> | |
| <option value="landscape_4_3">Landscape 4:3</option> | |
| <option value="landscape_16_9">Landscape 16:9</option> | |
| </select> | |
| <button onclick="generateImage()" id="generateBtn" | |
| class="w-full px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"> | |
| Generate Image | |
| </button> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg min-h-[300px] flex items-center justify-center p-4"> | |
| <div id="loadingSpinner" class="hidden"> | |
| <div class="w-12 h-12 border-4 border-indigo-600 border-t-transparent rounded-full animate-spin"></div> | |
| </div> | |
| <img id="resultImage" class="hidden max-w-full max-h-[500px] rounded-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |