Spaces:

Rayan545454
/

rdddddddd

Running

App Files Files Community

Rayan545454 commited on Aug 20, 2025

Commit

9019b5a

verified ·

1 Parent(s): ebf0a6c

multimodalart/Qwen-Image-Fast - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +126 -42

index.html CHANGED Viewed

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>بوابة الدفع - PayTabs | الدفع بفيزا</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <link rel="preload" href="https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg" as="image">
   <style>
@@ -38,6 +39,13 @@
       transform: translateY(-2px);
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
     }
   </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -52,10 +60,38 @@
       <h1 class="text-3xl font-bold text-gray-800 mb-2">
         <i class="fas fa-phone-alt text-green-600 mr-2"></i>
         بوابة الدفع الآمن
       </h1>
       <p class="text-gray-600">أكمل عملية الدفع بكل سهولة وأمان</p>
     </header>
     <!-- Payment Form -->
     <div class="max-w-2xl mx-auto">
       <div class="payment-card rounded-xl shadow-lg overflow-hidden border border-gray-200">
@@ -314,6 +350,62 @@
   </div>
   <script>
     // Copy IBAN function
     function copyIBAN() {
       const iban = document.getElementById('ibanText').innerText;
@@ -326,37 +418,6 @@
     // Simple validation and input formatting
     document.addEventListener('DOMContentLoaded', function() {
-      // Card preview functionality
-      const cardNumberInput = document.querySelector('input[placeholder="رقم البطاقة"]');
-      const cardNameInput = document.querySelector('input[placeholder="اسم حامل البطاقة"]');
-      const expiryInput = document.querySelector('input[placeholder="MM/YY"]');
-      // Update card preview in real-time
-      function updateCardPreview() {
-        const previewNumber = document.querySelector('.card-number');
-        const previewName = document.querySelector('.name-value');
-        const previewExpiry = document.querySelector('.expiry-value');
-        // Format card number
-        let cardNumber = cardNumberInput.value.replace(/\D/g, '');
-        if (cardNumber.length > 0) {
-          cardNumber = cardNumber.match(/.{1,4}/g).join(' ');
-        } else {
-          cardNumber = '#### #### #### ####';
-        }
-        previewNumber.textContent = cardNumber;
-        previewName.textContent = cardNameInput.value || '----';
-        previewExpiry.textContent = expiryInput.value || 'MM/YY';
-      }
-      // Add event listeners
-      [cardNumberInput, cardNameInput, expiryInput].forEach(input => {
-        input.addEventListener('input', updateCardPreview);
-      });
-      // Initialize preview
-      updateCardPreview();
       // Visa button and card form handling
       const visaBtn = document.getElementById('visaBtn');
       const cardForm = document.getElementById('cardForm');
@@ -422,18 +483,41 @@
   <!-- Load Payment Widgets Script -->
   <script src="https://test.oppwa.com/v1/paymentWidgets.js?checkoutId=YOUR_CHECKOUT_ID"></script>
   <script>
-    document.addEventListener('DOMContentLoaded', function() {
-      // Card preview functionality
-      const cardNumber = document.querySelector('.card-number');
-      const nameValue = document.querySelector('.name-value');
-      const expiryValue = document.querySelector('.expiry-value');
-      // Sample data - in real app these would come from form inputs
-      setTimeout(() => {
-        cardNumber.textContent = '1234 5678 9012 3456';
-        nameValue.textContent = 'محمد أحمد';
-        expiryValue.textContent = '12/25';
-      }, 1000);
     });
   </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Rayan545454/rdddddddd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>بوابة الدفع - PayTabs | الدفع بفيزا</title>
   <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/kittentts-web@latest/dist/kittentts.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <link rel="preload" href="https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg" as="image">
   <style>
       transform: translateY(-2px);
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
     }
+    #imageResult {
+      transition: all 0.3s ease;
+    }
+    #generatedImage {
+      max-height: 500px;
+      object-fit: contain;
+    }
   </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
       <h1 class="text-3xl font-bold text-gray-800 mb-2">
         <i class="fas fa-phone-alt text-green-600 mr-2"></i>
         بوابة الدفع الآمن
+        <button onclick="speakText()" class="ml-2 p-2 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200">
+          <i class="fas fa-volume-up"></i>
+        </button>
       </h1>
       <p class="text-gray-600">أكمل عملية الدفع بكل سهولة وأمان</p>
     </header>
+    <!-- Image Generation Section -->
+    <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 mb-8">
+      <div class="bg-purple-600 px-6 py-4">
+        <h2 class="text-xl font-bold text-white">إنشاء الصور بالذكاء الاصطناعي</h2>
+      </div>
+      <div class="px-6 py-6">
+        <div class="mb-4">
+          <label for="promptInput" class="block text-sm font-medium text-gray-700 mb-2">وصف الصورة المطلوبة</label>
+          <textarea id="promptInput" rows="3" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="أدخل وصفًا تفصيليًا للصورة التي تريد إنشائها..."></textarea>
+        </div>
+        <button id="generateBtn" class="w-full bg-purple-600 text-white py-3 px-4 rounded-md hover:bg-purple-700 transition-colors">
+          <i class="fas fa-magic ml-2"></i> إنشاء الصورة
+        </button>
+        <div id="imageResult" class="mt-6 hidden">
+          <div class="border border-gray-200 rounded-lg p-4">
+            <img id="generatedImage" src="" alt="Generated Image" class="w-full rounded">
+          </div>
+          <button id="downloadBtn" class="mt-4 w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition-colors">
+            <i class="fas fa-download ml-2"></i> تحميل الصورة
+          </button>
+        </div>
+      </div>
+    </div>
     <!-- Payment Form -->
     <div class="max-w-2xl mx-auto">
       <div class="payment-card rounded-xl shadow-lg overflow-hidden border border-gray-200">
   </div>
   <script>
+    // Image Generation Functionality
+    document.getElementById('generateBtn').addEventListener('click', async function() {
+      const prompt = document.getElementById('promptInput').value.trim();
+      if (!prompt) {
+        alert('الرجاء إدخال وصف للصورة');
+        return;
+      }
+      const generateBtn = this;
+      generateBtn.disabled = true;
+      generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin ml-2"></i> جاري الإنشاء...';
+      try {
+        // Call Qwen-Image-Fast API
+        const response = await fetch('https://api.multimodalart.com/qwen-image-fast/generate', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            prompt: prompt,
+            size: '1024x1024',
+            quality: 'standard',
+            n: 1
+          })
+        });
+        if (!response.ok) {
+          throw new Error('فشل في إنشاء الصورة');
+        }
+        const result = await response.json();
+        const imageUrl = result.data[0].url;
+        document.getElementById('generatedImage').src = imageUrl;
+        document.getElementById('imageResult').classList.remove('hidden');
+        // Set up download button
+        document.getElementById('downloadBtn').onclick = function() {
+          const link = document.createElement('a');
+          link.href = imageUrl;
+          link.download = `generated-image-${Date.now()}.png`;
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+        };
+      } catch (error) {
+        console.error('Error:', error);
+        alert('حدث خطأ أثناء إنشاء الصورة: ' + error.message);
+      } finally {
+        generateBtn.disabled = false;
+        generateBtn.innerHTML = '<i class="fas fa-magic ml-2"></i> إنشاء الصورة';
+      }
+    });
     // Copy IBAN function
     function copyIBAN() {
       const iban = document.getElementById('ibanText').innerText;
     // Simple validation and input formatting
     document.addEventListener('DOMContentLoaded', function() {
       // Visa button and card form handling
       const visaBtn = document.getElementById('visaBtn');
       const cardForm = document.getElementById('cardForm');
   <!-- Load Payment Widgets Script -->
   <script src="https://test.oppwa.com/v1/paymentWidgets.js?checkoutId=YOUR_CHECKOUT_ID"></script>
   <script>
+    function speakText() {
+      // Get all text content from the page
+      const pageText = document.body.innerText;
+      // Configure KittenTTS
+      const tts = new KittenTTS({
+        voice: 'ar-SA', // Arabic (Saudi Arabia) voice
+        rate: 1.0,
+        pitch: 1.0
+      });
+      // Speak the text
+      tts.speak(pageText).catch(err => {
+        console.error('TTS Error:', err);
+        alert('حدث خطأ في تشغيل الصوت. يرجى المحاولة مرة أخرى.');
+      });
+    }
+    // Add TTS button to important sections
+    document.addEventListener('DOMContentLoaded', function() {
+      // Add TTS button to payment sections
+      const paymentSections = document.querySelectorAll('.payment-card, .bg-white.rounded-xl');
+      paymentSections.forEach(section => {
+        const heading = section.querySelector('h2, h3');
+        if (heading) {
+          const ttsBtn = document.createElement('button');
+          ttsBtn.innerHTML = '<i class="fas fa-volume-up"></i>';
+          ttsBtn.className = 'ml-2 p-1 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 text-sm';
+          ttsBtn.onclick = () => {
+            const text = section.innerText;
+            new KittenTTS({voice: 'ar-SA'}).speak(text);
+          };
+          heading.appendChild(ttsBtn);
+        }
+      });
     });
   </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Rayan545454/rdddddddd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>