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>بونساي نانو</title> | |
| <style> | |
| body { background-color: #0f172a; color: white; font-family: sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; } | |
| #status { background: #1e293b; padding: 10px; border-radius: 8px; margin-bottom: 10px; font-size: 0.9rem; border: 1px solid #334155; width: 100%; max-width: 400px; text-align: center; } | |
| textarea { width: 100%; max-width: 400px; background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 10px; color: white; margin-bottom: 10px; } | |
| button { background: #22c55e; color: white; border: none; padding: 10px 25px; border-radius: 5px; cursor: pointer; font-weight: bold; } | |
| button:disabled { background: #475569; } | |
| #output { margin-top: 20px; width: 100%; max-width: 400px; line-height: 1.6; color: #cbd5e1; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Bonsai AI للأجهزة الضعيفة</h1> | |
| <div id="status">جاري التهيئة...</div> | |
| <textarea id="input" rows="3" placeholder="اكتب سؤالك هنا..."></textarea> | |
| <button id="btn" disabled>إرسال</button> | |
| <div id="output"></div> | |
| <script type="module"> | |
| import { pipeline } from 'https://jsdelivr.net'; | |
| const status = document.getElementById('status'); | |
| const btn = document.getElementById('btn'); | |
| const output = document.getElementById('output'); | |
| const input = document.getElementById('input'); | |
| let generator; | |
| async function init() { | |
| try { | |
| status.innerText = "جاري تحميل النموذج الخفيف (CPU Mode)..."; | |
| // للأجهزة الضعيفة والموبايل، نلغي WebGPU ونستخدم CPU لضمان العمل | |
| generator = await pipeline('text-generation', 'Xenova/Qwen1.5-0.5B-Chat', { | |
| device: 'wasm' | |
| }); | |
| status.innerText = "النموذج جاهز! يمكنك الدردشة الآن."; | |
| btn.disabled = false; | |
| } catch (e) { | |
| status.innerText = "حدث خطأ: " + e.message; | |
| } | |
| } | |
| btn.onclick = async () => { | |
| const text = input.value; | |
| if(!text) return; | |
| btn.disabled = true; | |
| output.innerText = "جاري التفكير..."; | |
| const res = await generator(text, { max_new_tokens: 50 }); | |
| output.innerText = res[0].generated_text; | |
| btn.disabled = false; | |
| }; | |
| init(); | |
| </script> | |
| </body> | |
| </html> | |