Spaces:

aheedsajid
/

face-ai

Running

App Files Files Community

aheedsajid commited on Jan 30, 2025

Commit

cb83d91

verified ·

1 Parent(s): 7fc5d02

Upload 3 files

Browse files

Files changed (3) hide show

index.html +79 -19
script.js +106 -0
tailwind.config.js +20 -0

index.html CHANGED Viewed

@@ -1,19 +1,79 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<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>

script.js ADDED Viewed

	@@ -0,0 +1,106 @@

+const API_KEY_STORAGE_KEY = 'rapidapi_key';
+document.addEventListener('DOMContentLoaded', () => {
+  const savedApiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
+  if (savedApiKey) {
+    document.getElementById('apiKey').value = savedApiKey;
+  }
+});
+function saveApiKey() {
+  const apiKey = document.getElementById('apiKey').value.trim();
+  if (apiKey) {
+    localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
+    showNotification('API key saved successfully!');
+  } else {
+    showNotification('Please enter a valid API key', true);
+  }
+}
+function showNotification(message, isError = false) {
+  const notification = document.createElement('div');
+  notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg text-white ${
+    isError ? 'bg-red-500' : 'bg-green-500'
+  } shadow-lg transform transition-transform duration-300 ease-in-out`;
+  notification.textContent = message;
+  document.body.appendChild(notification);
+  setTimeout(() => {
+    notification.style.transform = 'translateY(-100%)';
+    setTimeout(() => notification.remove(), 300);
+  }, 3000);
+}
+async function generateImage() {
+  const apiKey = document.getElementById('apiKey').value.trim();
+  const referenceImageUrl = document.getElementById('referenceImageUrl').value.trim();
+  const prompt = document.getElementById('prompt').value.trim();
+  const imageSize = document.getElementById('imageSize').value;
+  if (!apiKey) {
+    showNotification('Please enter your RapidAPI key', true);
+    return;
+  }
+  if (!referenceImageUrl) {
+    showNotification('Please enter a reference image URL', true);
+    return;
+  }
+  if (!prompt) {
+    showNotification('Please enter a prompt', true);
+    return;
+  }
+  const generateBtn = document.getElementById('generateBtn');
+  const loadingSpinner = document.getElementById('loadingSpinner');
+  const resultImage = document.getElementById('resultImage');
+  generateBtn.disabled = true;
+  loadingSpinner.classList.remove('hidden');
+  resultImage.classList.add('hidden');
+  try {
+    const response = await fetch('https://text-to-image-api-with-face.p.rapidapi.com/face-ai.php', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-rapidapi-host': 'text-to-image-api-with-face.p.rapidapi.com',
+        'x-rapidapi-key': apiKey
+      },
+      body: JSON.stringify({
+        reference_images: [{
+          image_url: referenceImageUrl
+        }],
+        prompt: prompt,
+        image_size: imageSize
+      })
+    });
+    const data = await response.json();
+    if (data.url) {
+      resultImage.src = data.url;
+      resultImage.classList.remove('hidden');
+    } else {
+      throw new Error('No image URL in response');
+    }
+  } catch (error) {
+    showNotification('Error generating image: ' + error.message, true);
+  } finally {
+    generateBtn.disabled = false;
+    loadingSpinner.classList.add('hidden');
+  }
+}
+document.querySelectorAll('input').forEach(input => {
+  input.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') {
+      if (input.id === 'apiKey') {
+        saveApiKey();
+      } else {
+        generateImage();
+      }
+    }
+  });
+});

tailwind.config.js ADDED Viewed

	@@ -0,0 +1,20 @@

+tailwind.config = {
+  theme: {
+    extend: {
+      colors: {
+        indigo: {
+          50: '#eef2ff',
+          100: '#e0e7ff',
+          200: '#c7d2fe',
+          300: '#a5b4fc',
+          400: '#818cf8',
+          500: '#6366f1',
+          600: '#4f46e5',
+          700: '#4338ca',
+          800: '#3730a3',
+          900: '#312e81',
+        },
+      },
+    },
+  },
+}