Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Studio - مساعد الذكاء الاصطناعي</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #6366f1; | |
| --primary-hover: #4f46e5; | |
| --secondary: #ec4899; | |
| --bg-dark: #0f172a; | |
| --bg-card: rgba(30, 41, 59, 0.7); | |
| --text-primary: #f8fafc; | |
| --text-secondary: #cbd5e1; | |
| --border: rgba(148, 163, 184, 0.2); | |
| --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Noto Kufi Arabic', 'Inter', sans-serif; | |
| background: var(--bg-dark); | |
| color: var(--text-primary); | |
| height: 100vh; | |
| overflow: hidden; | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 20%); | |
| } | |
| /* Glassmorphism Utilities */ | |
| .glass { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid var(--border); | |
| } | |
| /* Layout */ | |
| .app-container { | |
| display: grid; | |
| grid-template-columns: 280px 1fr; | |
| height: 100vh; | |
| gap: 1px; | |
| background: var(--border); | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| background: rgba(15, 23, 42, 0.95); | |
| display: flex; | |
| flex-direction: column; | |
| padding: 1.5rem; | |
| gap: 1.5rem; | |
| overflow-y: auto; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| background: var(--gradient-1); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .nav-section { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .nav-title { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-secondary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| padding: 0.75rem 1rem; | |
| border-radius: 0.75rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| color: var(--text-secondary); | |
| border: 1px solid transparent; | |
| } | |
| .nav-item:hover { | |
| background: rgba(99, 102, 241, 0.1); | |
| color: var(--text-primary); | |
| border-color: var(--border); | |
| } | |
| .nav-item.active { | |
| background: rgba(99, 102, 241, 0.2); | |
| color: var(--primary); | |
| border-color: var(--primary); | |
| } | |
| .new-chat-btn { | |
| background: var(--gradient-1); | |
| color: white; | |
| border: none; | |
| padding: 1rem; | |
| border-radius: 1rem; | |
| font-family: inherit; | |
| font-weight: 600; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); | |
| } | |
| .new-chat-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6); | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| display: flex; | |
| flex-direction: column; | |
| background: var(--bg-dark); | |
| position: relative; | |
| } | |
| .top-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 2rem; | |
| border-bottom: 1px solid var(--border); | |
| background: rgba(15, 23, 42, 0.8); | |
| backdrop-filter: blur(10px); | |
| } | |
| .model-selector { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.5rem 1rem; | |
| background: rgba(30, 41, 59, 0.5); | |
| border: 1px solid var(--border); | |
| border-radius: 0.5rem; | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| cursor: pointer; | |
| } | |
| .top-actions { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| } | |
| .icon-btn { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| border: 1px solid var(--border); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s; | |
| } | |
| .icon-btn:hover { | |
| background: rgba(255,255,255,0.1); | |
| color: var(--text-primary); | |
| transform: rotate(15deg); | |
| } | |
| /* Chat Area */ | |
| .chat-container { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 2rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .welcome-screen { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| text-align: center; | |
| gap: 2rem; | |
| opacity: 0; | |
| animation: fadeIn 0.8s forwards; | |
| } | |
| @keyframes fadeIn { | |
| to { opacity: 1; } | |
| } | |
| .welcome-title { | |
| font-size: 3rem; | |
| font-weight: 700; | |
| background: linear-gradient(to right, #fff, #a5b4fc); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .welcome-subtitle { | |
| color: var(--text-secondary); | |
| font-size: 1.1rem; | |
| max-width: 600px; | |
| line-height: 1.8; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 1rem; | |
| width: 100%; | |
| max-width: 800px; | |
| margin-top: 2rem; | |
| } | |
| .feature-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| padding: 1.5rem; | |
| border-radius: 1rem; | |
| text-align: right; | |
| transition: transform 0.3s, border-color 0.3s; | |
| cursor: pointer; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--primary); | |
| } | |
| .feature-icon { | |
| font-size: 2rem; | |
| margin-bottom: 1rem; | |
| background: var(--gradient-2); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| /* Messages */ | |
| .message { | |
| display: flex; | |
| gap: 1rem; | |
| max-width: 80%; | |
| animation: slideIn 0.3s ease; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .message.user { | |
| margin-left: auto; | |
| flex-direction: row-reverse; | |
| } | |
| .message-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 600; | |
| flex-shrink: 0; | |
| } | |
| .message.user .message-avatar { | |
| background: var(--gradient-1); | |
| color: white; | |
| } | |
| .message.ai .message-avatar { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| color: var(--secondary); | |
| } | |
| .message-content { | |
| background: var(--bg-card); | |
| padding: 1rem 1.5rem; | |
| border-radius: 1.5rem; | |
| border: 1px solid var(--border); | |
| line-height: 1.8; | |
| position: relative; | |
| } | |
| .message.user .message-content { | |
| background: var(--gradient-1); | |
| border: none; | |
| color: white; | |
| } | |
| .message-image { | |
| max-width: 100%; | |
| border-radius: 1rem; | |
| margin-top: 0.5rem; | |
| border: 1px solid var(--border); | |
| } | |
| /* Input Area */ | |
| .input-container { | |
| padding: 1.5rem 2rem; | |
| background: rgba(15, 23, 42, 0.9); | |
| border-top: 1px solid var(--border); | |
| } | |
| .input-wrapper { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| position: relative; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 1.5rem; | |
| padding: 0.75rem; | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 0.5rem; | |
| transition: border-color 0.3s, box-shadow 0.3s; | |
| } | |
| .input-wrapper:focus-within { | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); | |
| } | |
| .input-field { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| font-size: 1rem; | |
| resize: none; | |
| max-height: 200px; | |
| padding: 0.5rem; | |
| outline: none; | |
| line-height: 1.5; | |
| } | |
| .input-field::placeholder { | |
| color: var(--text-secondary); | |
| } | |
| .input-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| padding: 0.25rem; | |
| } | |
| .input-btn { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s; | |
| } | |
| .input-btn:hover { | |
| background: rgba(255,255,255,0.1); | |
| color: var(--text-primary); | |
| } | |
| .send-btn { | |
| background: var(--primary) ; | |
| color: white ; | |
| transform: scale(1); | |
| transition: transform 0.2s, background 0.2s ; | |
| } | |
| .send-btn:hover { | |
| background: var(--primary-hover) ; | |
| transform: scale(1.05); | |
| } | |
| .send-btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| transform: scale(1); | |
| } | |
| /* Typing Indicator */ | |
| .typing-indicator { | |
| display: none; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 1rem 1.5rem; | |
| background: var(--bg-card); | |
| border-radius: 1.5rem; | |
| border: 1px solid var(--border); | |
| width: fit-content; | |
| } | |
| .typing-indicator.active { | |
| display: flex; | |
| } | |
| .dot { | |
| width: 8px; | |
| height: 8px; | |
| background: var(--text-secondary); | |
| border-radius: 50%; | |
| animation: bounce 1.4s infinite ease-in-out both; | |
| } | |
| .dot:nth-child(1) { animation-delay: -0.32s; } | |
| .dot:nth-child(2) { animation-delay: -0.16s; } | |
| @keyframes bounce { | |
| 0%, 80%, 100% { transform: scale(0); } | |
| 40% { transform: scale(1); } | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .app-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| display: none; | |
| position: absolute; | |
| z-index: 100; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .sidebar.active { | |
| display: flex; | |
| } | |
| .welcome-title { | |
| font-size: 2rem; | |
| } | |
| .message { | |
| max-width: 90%; | |
| } | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-secondary); | |
| } | |
| /* Built with anycoder link */ | |
| .anycoder-badge { | |
| position: fixed; | |
| top: 20px; | |
| left: 20px; | |
| background: rgba(99, 102, 241, 0.2); | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| padding: 0.5rem 1rem; | |
| border-radius: 2rem; | |
| font-size: 0.875rem; | |
| text-decoration: none; | |
| backdrop-filter: blur(10px); | |
| z-index: 1000; | |
| transition: all 0.3s; | |
| } | |
| .anycoder-badge:hover { | |
| background: var(--primary); | |
| color: white; | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); | |
| } | |
| .disclaimer { | |
| position: fixed; | |
| bottom: 10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| opacity: 0.7; | |
| text-align: center; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-badge"> | |
| <i class="fas fa-code"></i> Built with anycoder | |
| </a> | |
| <div class="app-container"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar glass"> | |
| <div class="logo"> | |
| <i class="fas fa-robot"></i> | |
| <span>AI Studio</span> | |
| </div> | |
| <button class="new-chat-btn" onclick="startNewChat()"> | |
| <i class="fas fa-plus"></i> | |
| محادثة جديدة | |
| </button> | |
| <div class="nav-section"> | |
| <div class="nav-title">النماذج المتاحة</div> | |
| <div class="nav-item active" onclick="selectModel('gpt-4')"> | |
| <i class="fas fa-brain"></i> | |
| <span>GPT-4</span> | |
| </div> | |
| <div class="nav-item" onclick="selectModel('dalle')"> | |
| <i class="fas fa-image"></i> | |
| <span>DALL-E 3</span> | |
| </div> | |
| <div class="nav-item" onclick="selectModel('claude')"> | |
| <i class="fas fa-comments"></i> | |
| <span>Claude 3</span> | |
| </div> | |
| </div> | |
| <div class="nav-section" style="margin-top: auto;"> | |
| <div class="nav-title">الإعدادات</div> | |
| <div class="nav-item" onclick="toggleTheme()"> | |
| <i class="fas fa-moon"></i> | |
| <span>الوضع الليلي</span> | |
| </div> | |
| <div class="nav-item"> | |
| <i class="fas fa-key"></i> | |
| <span>إعدادات API</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <header class="top-bar"> | |
| <div class="model-selector"> | |
| <i class="fas fa-chevron-down"></i> | |
| <span id="current-model">GPT-4</span> | |
| </div> | |
| <div class="top-actions"> | |
| <button class="icon-btn" onclick="clearChat()" title="مسح المحادثة"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| <button class="icon-btn" onclick="toggleSidebar()" title="القائمة"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <div class="chat-container" id="chatContainer"> | |
| <div class="welcome-screen" id="welcomeScreen"> | |
| <h1 class="welcome-title">مرحباً بك في AI Studio</h1> | |
| <p class="welcome-subtitle"> | |
| مساعد ذكي متقدم يدعم المحادثات النصية وتوليد الصور الإبداعية. | |
| اختر نموذجاً من القائمة وابدأ المحادثة. | |
| </p> | |
| <div class="features-grid"> | |
| <div class="feature-card" onclick="setPrompt('اكتب قصة قصيرة عن المستقبل')"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-pen-fancy"></i> | |
| </div> | |
| <h3>كتابة إبداعية</h3> | |
| <p style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.5rem;"> | |
| قصص، مقالات، ومحتوى نصي متنوع | |
| </p> | |
| </div> | |
| <div class="feature-card" onclick="setPrompt('ارسم منظر طبيعي لجبال مغطاة بالثلج')"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-palette"></i> | |
| </div> | |
| <h3>توليد صور</h3> | |
| <p style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.5rem;"> | |
| صور فنية وإبداعية عالية الجودة | |
| </p> | |
| </div> | |
| <div class="feature-card" onclick="setPrompt('اشرح لي نظرية النسبية ببساطة')"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </div> | |
| <h3>شرح المفاهيم</h3> | |
| <p style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.5rem;"> | |
| تبسيط العلوم والمعارف المعقدة | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="typing-indicator" id="typingIndicator"> | |
| <div class="dot"></div> | |
| <div class="dot"></div> | |
| <div class="dot"></div> | |
| </div> | |
| <div class="input-container"> | |
| <div class="input-wrapper"> | |
| <textarea | |
| class="input-field" | |
| id="userInput" | |
| placeholder="اكتب رسالتك هنا..." | |
| rows="1" | |
| oninput="autoResize(this)" | |
| onkeydown="handleKeyDown(event)" | |
| ></textarea> | |
| <div class="input-actions"> | |
| <button class="input-btn" title="إرفاق ملف" onclick="attachFile()"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <button class="input-btn send-btn" id="sendBtn" onclick="sendMessage()" title="إرسال"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <div class="disclaimer"> | |
| ملاحظة: هذا التطبيق يتطلب مفاتيح API للعمل. يجب الالتزام بشروط استخدام مزودي الخدمة. | |
| </div> | |
| <script> | |
| let currentModel = 'gpt-4'; | |
| let chatHistory = []; | |
| let isGenerating = false; | |
| // Auto-resize textarea | |
| function autoResize(textarea) { | |
| textarea.style.height = 'auto'; | |
| textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px'; | |
| } | |
| // Handle Enter key | |
| function handleKeyDown(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| } | |
| // Set prompt from feature cards | |
| function setPrompt(text) { | |
| document.getElementById('userInput').value = text; | |
| document.getElementById('userInput').focus(); | |
| autoResize(document.getElementById('userInput')); | |
| } | |
| // Select model | |
| function selectModel(model) { | |
| currentModel = model; | |
| document.getElementById('current-model').textContent = | |
| model === 'gpt-4' ? 'GPT-4' : | |
| model === 'dalle' ? 'DALL-E 3' : 'Claude 3'; | |
| // Update active state | |
| document.querySelectorAll('.nav-item').forEach(item => { | |
| item.classList.remove('active'); | |
| }); | |
| event.currentTarget.classList.add('active'); | |
| } | |
| // Send message | |
| async function sendMessage() { | |
| const input = document.getElementById('userInput'); | |
| const message = input.value.trim(); | |
| if (!message || isGenerating) return; | |
| // Hide welcome screen | |
| document.getElementById('welcomeScreen').style.display = 'none'; | |
| // Add user message | |
| addMessage(message, 'user'); | |
| input.value = ''; | |
| input.style.height = 'auto'; | |
| // Show typing indicator | |
| isGenerating = true; | |
| document.getElementById('sendBtn').disabled = true; | |
| document.getElementById('typingIndicator').classList.add('active'); | |
| // Simulate AI response (In real app, this would call API) | |
| setTimeout(() => { | |
| let response; | |
| if (currentModel === 'dalle') { | |
| response = "لقد تم توليد الصورة بنجاح (تجريبي). في التطبيق الفعلي، ستظهر الصورة هنا."; | |
| // Simulate image generation | |
| addMessage(response, 'ai', true); | |
| } else { | |
| response = generateMockResponse(message); | |
| addMessage(response, 'ai'); | |
| } | |
| document.getElementById('typingIndicator').classList.remove('active'); | |
| isGenerating = false; | |
| document.getElementById('sendBtn').disabled = false; | |
| }, 1500 + Math.random() * 1000); | |
| } | |
| // Add message to chat | |
| function addMessage(content, sender, isImage = false) { | |
| const container = document.getElementById('chatContainer'); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message ${sender}`; | |
| const avatar = document.createElement('div'); | |
| avatar.className = 'message-avatar'; | |
| avatar.innerHTML = sender === 'user' ? '<i class="fas fa-user"></i>' : '<i class="fas fa-robot"></i>'; | |
| const contentDiv = document.createElement('div'); | |
| contentDiv.className = 'message-content'; | |
| if (isImage && currentModel === 'dalle') { | |
| // Simulate image placeholder | |
| contentDiv.innerHTML = ` | |
| <div style="margin-bottom: 0.5rem;">${content}</div> | |
| <div style="background: linear-gradient(45deg, #1e293b, #334155); height: 300px; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; color: var(--text-secondary);"> | |
| <i class="fas fa-image" style="font-size: 3rem; opacity: 0.5;"></i> | |
| </div> | |
| <div style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.5rem;"> | |
| <i class="fas fa-info-circle"></i> | |
| ملاحظة: يتطلب الاستخدام الفعلي ربط مفتاح API من OpenAI | |
| </div> | |
| `; | |
| } else { | |
| contentDiv.textContent = content; | |
| } | |
| messageDiv.appendChild(avatar); | |
| messageDiv.appendChild(contentDiv); | |
| container.appendChild(messageDiv); | |
| // Scroll to bottom | |
| container.scrollTop = container.scrollHeight; | |
| // Save to history | |
| chatHistory.push({ sender, content }); | |
| } | |
| // Mock response generator | |
| function generateMockResponse(input) { | |
| const responses = [ | |
| "هذا رد تجريبي. في التطبيق الفعلي، سيتم الاتصال بـ API للحصول على رد حقيقي.", | |
| "أفهم سؤالك. يمكنني مساعدتك في هذا الموضوع عند ربط التطبيق بمفتاح API.", | |
| "شكراً لسؤالك! هذا تطبيق واجهة مستخدم (UI) يحتاج إلى ربط خدمات الذكاء الاصطناعي للعمل.", | |
| "يمكنني مساعدتك في: الكتابة الإبداعية، البرمجة، التحليل، والإجابة على الأسئلة العامة." | |
| ]; | |
| return responses[Math.floor(Math.random() * responses.length)]; | |
| } | |
| // Clear chat | |
| function clearChat() { | |
| const container = document.getElementById('chatContainer'); | |
| container.innerHTML = ` | |
| <div class="welcome-screen" id="welcomeScreen"> | |
| <h1 class="welcome-title">مرحباً بك في AI Studio</h1> | |
| <p class="welcome-subtitle"> | |
| مساعد ذكي متقدم يدعم المحادثات النصية وتوليد الصور الإبداعية. | |
| اختر نموذجاً من القائمة وابدأ المحادثة. | |
| </p> | |
| <div class="features-grid"> | |
| <div class="feature-card" onclick="setPrompt('اكتب قصة قصيرة عن المستقبل')"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-pen-fancy"></i> | |
| </div> | |
| <h3>كتابة إبداعية</h3> | |
| <p style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.5rem;"> | |
| قصص، مقالات، ومحتوى نصي متنوع | |
| </p> | |
| </div> | |
| <div class="feature-card" onclick="setPrompt('ارسم منظر طبيعي لجبال مغطاة بالثلج')"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-palette"></i> | |
| </div> | |
| <h3>توليد صور</h3> | |
| <p style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.5rem;"> | |
| صور فنية وإبداعية عالية الجودة | |
| </p> | |
| </div> | |
| <div class="feature-card" onclick="setPrompt('اشرح لي نظرية النسبية ببساطة')"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </div> | |
| <h3>شرح المفاهيم</h3> | |
| <p style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.5rem;"> | |
| تبسيط العلوم والمعارف المعقدة | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatHistory = []; | |
| } | |
| // Start new chat | |
| function startNewChat() { | |
| clearChat(); | |
| } | |
| // Toggle sidebar on mobile | |
| function toggleSidebar() { | |
| document.querySelector('.sidebar').classList.toggle('active'); | |
| } | |
| // Toggle theme (placeholder) | |
| function toggleTheme() { | |
| alert('ميزة تغيير الثيم قيد التطوير'); | |
| } | |
| // Attach file (placeholder) | |
| function attachFile() { | |
| alert('ميزة إرفاق الملفات تتطلب إعدادات خادم (Backend)'); | |
| } | |
| // Note: To make this functional with real AI, you would need to: | |
| // 1. Add your API keys securely (preferably through a backend) | |
| // 2. Implement fetch() calls to OpenAI, Anthropic, or other APIs | |
| // 3. Handle streaming responses for better UX | |
| // 4. Implement proper error handling and rate limiting | |
| console.log('AI Studio Loaded - Ready for integration'); | |
| </script> | |
| </body> | |
| </html> |