| | import os |
| | import gradio as gr |
| | from fastapi import FastAPI, Request, File, UploadFile |
| | from fastapi.responses import StreamingResponse, HTMLResponse |
| | from openai import OpenAI |
| |
|
| | app = FastAPI() |
| |
|
| | |
| | HTML_UI = """ |
| | <!DOCTYPE html> |
| | <html lang="ar" dir="rtl"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
| | <title>Neural Vault</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script> |
| | <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> |
| | <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> |
| | <style> |
| | body { background: #020617; color: #f8fafc; height: 100dvh; overflow: hidden; margin: 0; position: fixed; width: 100vw; } |
| | .chat-area { height: calc(100dvh - 160px); overflow-y: auto; padding: 20px; -webkit-overflow-scrolling: touch; } |
| | .sidebar { position: fixed; top: 0; right: -100%; width: 80%; max-width: 300px; height: 100%; background: #0f172a; z-index: 2000; transition: 0.3s ease; border-left: 1px solid #1e293b; } |
| | .sidebar.open { right: 0; } |
| | .input-bar { position: fixed; bottom: 0; width: 100%; padding: 15px; background: #020617; border-top: 1px solid #1e293b; } |
| | .bubble { max-width: 85%; padding: 12px; border-radius: 18px; font-size: 14px; margin-bottom: 10px; line-height: 1.5; } |
| | .user { background: #1e293b; margin-right: auto; border-bottom-right-radius: 4px; } |
| | .bot { background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.2); margin-left: auto; border-bottom-left-radius: 4px; } |
| | </style> |
| | </head> |
| | <body> |
| | <div id="root"></div> |
| | <script type="text/babel"> |
| | const { useState, useEffect, useRef } = React; |
| | function App() { |
| | const [messages, setMessages] = useState([]); |
| | const [input, setInput] = useState(""); |
| | const [isSideOpen, setSideOpen] = useState(false); |
| | const [status, setStatus] = useState("idle"); |
| | const chatRef = useRef(null); |
| | |
| | useEffect(() => { chatRef.current?.scrollTo(0, chatRef.current.scrollHeight); }, [messages]); |
| | |
| | const send = async () => { |
| | if(!input.trim()) return; |
| | const userMsg = {role: 'user', content: input}; |
| | setMessages(prev => [...prev, userMsg]); |
| | setInput(""); |
| | setStatus("thinking"); |
| | |
| | try { |
| | const res = await fetch('/v1/chat/completions', { |
| | method: 'POST', |
| | headers: {'Content-Type': 'application/json'}, |
| | body: JSON.stringify({ messages: [...messages, userMsg] }) |
| | }); |
| | |
| | const reader = res.body.getReader(); |
| | let botMsg = { role: 'assistant', content: "" }; |
| | setMessages(p => [...p, botMsg]); |
| | |
| | while(true) { |
| | const {done, value} = await reader.read(); |
| | if(done) break; |
| | const chunk = new TextDecoder().decode(value).replace(/data: /g, ''); |
| | if(chunk.includes("[DONE]")) break; |
| | botMsg.content += chunk; |
| | setMessages(p => [...p.slice(0, -1), {...botMsg}]); |
| | } |
| | } catch (e) { console.error(e); } |
| | setStatus("idle"); |
| | }; |
| | |
| | return ( |
| | <div className="flex flex-col h-full"> |
| | <header className="p-4 border-b border-white/5 flex justify-between items-center bg-slate-900/50"> |
| | <button onClick={() => setSideOpen(true)} className="text-xl">☰</button> |
| | <span className="font-bold text-sm tracking-widest">NEURAL VAULT</span> |
| | <div className={`w-2 h-2 rounded-full ${status === 'idle' ? 'bg-emerald-500' : 'bg-indigo-500 animate-pulse'}`}></div> |
| | </header> |
| | |
| | <div ref={chatRef} className="chat-area space-y-4"> |
| | {messages.map((m, i) => ( |
| | <div key={i} className={`bubble ${m.role === 'user' ? 'user' : 'bot'}`}> |
| | {m.content} |
| | </div> |
| | ))} |
| | </div> |
| | |
| | <div className="input-bar"> |
| | <div className="flex gap-2 max-w-xl mx-auto"> |
| | <input |
| | className="flex-1 bg-slate-900 border border-white/10 rounded-xl px-4 py-2 outline-none text-sm" |
| | placeholder="اكتب سؤالك..." |
| | value={input} |
| | onChange={e => setInput(e.target.value)} |
| | onKeyDown={e => e.key === 'Enter' && send()} |
| | /> |
| | <button onClick={send} className="bg-indigo-600 px-5 rounded-xl">↑</button> |
| | </div> |
| | </div> |
| | |
| | <div className={`sidebar p-6 ${isSideOpen ? 'open' : ''}`}> |
| | <div className="flex justify-between items-center mb-10"> |
| | <h2 className="font-bold">الإعدادات</h2> |
| | <button onClick={() => setSideOpen(false)}>✕</button> |
| | </div> |
| | <div className="p-4 bg-slate-800/50 rounded-xl text-xs"> |
| | <p>الموديل: Mistral-Small-24B</p> |
| | <p className="mt-2 text-emerald-400">الحالة: متصل</p> |
| | </div> |
| | </div> |
| | </div> |
| | ); |
| | } |
| | const root = ReactDOM.createRoot(document.getElementById('root')); |
| | root.render(<App />); |
| | </script> |
| | </body> |
| | </html> |
| | """ |
| |
|
| | @app.get("/") |
| | async def ui(): |
| | return HTMLResponse(HTML_UI) |
| |
|
| | @app.post("/v1/chat/completions") |
| | async def chat_api(request: Request): |
| | body = await request.json() |
| | |
| | |
| | api_key = os.getenv("HF_TOKEN") |
| | |
| | client = OpenAI( |
| | base_url="https://router.huggingface.co/hf-inference/v1", |
| | api_key=api_key |
| | ) |
| |
|
| | def stream_gen(): |
| | resp = client.chat.completions.create( |
| | model="huihui-ai/Mistral-Small-24B-Instruct-2501-abliterated", |
| | messages=body.get("messages", []), |
| | stream=True |
| | ) |
| | for chunk in resp: |
| | if chunk.choices[0].delta.content: |
| | yield f"data: {chunk.choices[0].delta.content}\n\n" |
| | yield "data: [DONE]\n\n" |
| |
|
| | return StreamingResponse(stream_gen(), media_type="text/event-stream") |
| |
|
| | |
| | with gr.Blocks() as auth_interface: |
| | gr.Markdown("# مرحبا بك في الدهليز") |
| | |
| | gr.LoginButton("الدخول عبر Hugging Face") |
| |
|
| | app = gr.mount_gradio_app(app, auth_interface, path="/auth") |
| |
|
| | if __name__ == "__main__": |
| | import uvicorn |
| | uvicorn.run(app, host="0.0.0.0", port=7860) |
| |
|
