Developer82/deepsite-project

1 2<!doctype html>3<html>4<head>5  <meta charset="utf-8">6  <title>AI Video Maker</title>7  <link rel="stylesheet" href="style.css" />8  <style>9    body { font-family: Arial, Helvetica, sans-serif; max-width:900px; margin:30px auto; padding:0 20px; }10    label { display:block; margin-top:12px; font-weight:600; }11    textarea, input, select { width:100%; padding:8px; margin-top:6px; box-sizing:border-box; }12    button { margin-top:12px; padding:10px 14px; font-size:16px; }13    .note { color: #555; font-size:13px; margin-top:6px; }14  </style>15</head>16<body>17  <header class="header">18    <h1><i class="fas fa-video"></i> AI Video Maker — مثال عملي</h1>19  </header>20  <main class="container">21  <form id="form" class="video-form">22<label>Prompt (وصف المشهد):</label>23    <textarea id="prompt" rows="3">A cinematic sunrise over a desert, soft warm light, cinematic composition</textarea>24 25    <label>Duration (ثواني):</label>26    <input id="duration" type="number" value="4" min="1" max="30">27 28    <label>FPS (الإطارات بالثانية):</label>29    <input id="fps" type="number" value="6" min="1" max="24">30 31    <label>عرض الصورة (px):</label>32    <input id="width" type="number" value="512" min="256" max="1024">33 34    <label>ارتفاع الصورة (px):</label>35    <input id="height" type="number" value="512" min="256" max="1024">36 37    <label>TTS text (نص الكلام):</label>38    <textarea id="voice_text" rows="2"></textarea>39 40    <label>Guidance scale (تأثير النص على الصورة):</label>41    <input id="guidance" type="number" value="7.5" step="0.1" min="1" max="20">42 43    <label>Steps (عدد خطوات التوليد):</label>44    <input id="steps" type="number" value="20" min="5" max="50">45    <button type="submit" class="btn-primary">46      <i class="fas fa-play-circle"></i> Generate Video47    </button>48  </form>49 50  <div id="status" class="status-box"></div>51  </main>52<script>53const form = document.getElementById('form');54const status = document.getElementById('status');55 56form.addEventListener('submit', async (e) => {57  e.preventDefault();58  status.textContent = 'إرسال الطلب — جاري التوليد (قد يستغرق وقتاً)...';59  const data = new FormData();60  data.append('prompt', document.getElementById('prompt').value);61  data.append('duration', document.getElementById('duration').value);62  data.append('fps', document.getElementById('fps').value);63  data.append('width', document.getElementById('width').value);64  data.append('height', document.getElementById('height').value);65  data.append('voice_text', document.getElementById('voice_text').value);66  data.append('guidance', document.getElementById('guidance').value);67  data.append('steps', document.getElementById('steps').value);68 69  try {70    const res = await fetch('/generate', { method: 'POST', body: data });71    if (!res.ok) {72      const err = await res.json();73      status.textContent = 'خطأ: ' + (err.error || res.statusText);74      return;75    }76    const blob = await res.blob();77    const url = window.URL.createObjectURL(blob);78    const a = document.createElement('a');79    a.href = url;80    a.download = 'ai_video.mp4';81    a.textContent = 'تحميل الفيديو (انقر هنا)';82    status.innerHTML = '';83    status.appendChild(a);84  } catch (e) {85    status.textContent = 'حدث خطأ. تحقق من الخادم أو اتصال الإنترنت.';86    console.error(e);87  }88});89</script>90</body>91</html>92python -m venv venv93# على لينكس/ماك94source venv/bin/activate95# على ويندوز (PowerShell)96venv\Scripts\Activate.ps197 98pip install --upgrade pip99# قد تحتاج أولاً تثبيت torch بإصدار مناسب لنظامك/CUDA باتباع instructions من pytorch.org100pip install -r requirements.txt101