import gradio as gr

import requests

# Endpoints ثابتة
AZURE_CHAT_ENDPOINT = "https://lahja-dev-resource.cognitiveservices.azure.com/openai/deployments/gpt-4o/chat/completions?api-version=2025-01-01-preview"
AZURE_TTS_ENDPOINT = "https://lahja-dev-resource.cognitiveservices.azure.com/openai/deployments/LAHJA-V1/audio/speech?api-version=2025-03-01-preview"


# --- GPT رد ---
def chat_with_gpt(text, api_key):
headers = {
"Content-Type": "application/json",
"Authorization": f"Bearer {api_key}"
}
# system prompt لتعريف الشخصية
messages = [
{
"role": "system",
"content": (
"انت مساعد ذكي اسمه (لهجة)، مطور من قبل شركة (أسس الذكاء الرقمي). "
"رد دايمًا باللهجة النجدية السعودية. "
"خلك مختصر وواضح."
)
},
{"role": "user", "content": text}
]
data = {
"messages": messages,
"max_tokens": 512,
"temperature": 0.8,
"top_p": 1,
"model": "gpt-4o"
}
response = requests.post(AZURE_CHAT_ENDPOINT, json=data, headers=headers)
if response.status_code == 200:
return response.json()["choices"][0]["message"]["content"]
else:
return f"Error: {response.status_code}\n{response.text}"


# --- تحويل نص لصوت ---
def text_to_speech(text, voice, speed, filename, api_key):
headers = {
"Content-Type": "application/json",
"Authorization": f"Bearer {api_key}"
}
data = {
"model": "LAHJA-V1",
"input": text,
"voice": voice,
"speed": speed
}
response = requests.post(AZURE_TTS_ENDPOINT, json=data, headers=headers)
if response.status_code == 200:
with open(filename, "wb") as f:
f.write(response.content)
return filename
else:
return None


# --- دالة رئيسية ---
def chat_and_speak(user_input, voice, speed, history, api_key):
reply = chat_with_gpt(user_input, api_key)

# صوت السؤال
q_audio = text_to_speech(user_input, voice, speed, "question.wav", api_key)
# صوت الجواب
a_audio = text_to_speech(reply, voice, speed, "answer.wav", api_key)

# تحديث المحادثة
history = history + [(user_input, reply)]

return history, q_audio, a_audio


# --- التحقق من مفتاح الدخول ---
def check_key(user_key):
if user_key.strip() == "":
return gr.update(visible=True), gr.update(visible=False), None
else:
return gr.update(visible=False), gr.update(visible=True), user_key


# --- واجهة Gradio ---
with gr.Blocks(theme=gr.themes.Soft(), title="لهجة AI") as demo:
# -------- صفحة تسجيل الدخول --------
with gr.Group(visible=True) as login_page:
gr.Markdown(
"""
<div style="text-align:center; padding: 40px;">
<h1 style="color:#8B0000; font-size: 40px;">🔐 دخول إلى لهجة AI</h1>
<p style="font-size:18px; color:#444;">من فضلك أدخل مفتاح API للوصول إلى النظام</p>
</div>
""",
)
key_box = gr.Textbox(
placeholder="ادخل كود الدخول (API KEY)...",
label="API Key",
type="password"
)
login_btn = gr.Button("🚀 دخول", elem_id="login_btn")

api_key_state = gr.State()

# -------- صفحة المحادثة --------
with gr.Group(visible=False) as chat_page:
gr.Markdown(
"""
<div style="text-align:center; padding: 10px;">
<h1 style="color:#8B0000; font-size: 38px;">🤖 لهجة AI</h1>
<p style="font-size:18px; color:#333;">مطور من قبل شركة أسس الذكاء الرقمي | مساعد ذكي باللهجة النجدية</p>
</div>
"""
)

with gr.Row():
# عمود المحادثة
with gr.Column(scale=2):
chatbot = gr.Chatbot(label="المحادثة", height=450, bubble_full_width=False)
user_input = gr.Textbox(
placeholder="💬 اكتب سؤالك هنا...",
label="📌 نص المستخدم"
)
with gr.Row():
voice = gr.Dropdown(choices=["alloy"], value="alloy", label="🎙️ اختر الصوت")
speed = gr.Slider(minimum=0.5, maximum=2.0, value=1.0, step=0.1, label="⚡ سرعة الكلام")

send_btn = gr.Button("📤 أرسل", elem_classes="send-btn")

# عمود الصوت
with gr.Column(scale=1):
gr.Markdown("### 🔊 المخرجات الصوتية")
q_audio = gr.Audio(type="filepath", label="صوت السؤال")
a_audio = gr.Audio(type="filepath", label="صوت الجواب")

state = gr.State([])

send_btn.click(
fn=chat_and_speak,
inputs=[user_input, voice, speed, state, api_key_state],
outputs=[chatbot, q_audio, a_audio],
)

# -------- تحكم بظهور الصفحات --------
login_btn.click(
fn=check_key,
inputs=[key_box],
outputs=[login_page, chat_page, api_key_state],
)

demo.launch()

chat.html

@@ -78,8 +78,11 @@
                                     <div class="flex items-center">
                                         <label for="voiceSelect" class="ml-2 text-sm font-medium text-gray-700">الصوت:</label>
                                         <select id="voiceSelect" class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:ring-red-600 focus:border-red-600 outline-none">
-                                            <option value="alloy">عادي</option>
-                                        </select>
+                                        <option value="alloy">عادي</option>
+                                        <option value="echo">صدى</option>
+                                        <option value="nova">نوفا</option>
+                                        <option value="shimmer">شيمر</option>
+</select>
                                     </div>
                                     <div class="flex items-center">
                                         <label for="speedSelect" class="ml-2 text-sm font-medium text-gray-700">السرعة:</label>
@@ -101,8 +104,8 @@
                 </div>
 
                 <!-- Audio Players -->
-                <div id="audioSection" class="hidden mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div class="audio-player p-4 rounded-xl">
+                <div id="audioSection" class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+<div class="audio-player p-4 rounded-xl">
                         <h3 class="font-medium text-gray-800 mb-2">صوت السؤال</h3>
                         <audio id="questionAudio" controls class="w-full"></audio>
                     </div>
@@ -123,9 +126,9 @@
             </div>
         </footer>
     </div>
-
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
+        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+        <script>
+document.addEventListener('DOMContentLoaded', function() {
             const chatContainer = document.getElementById('chatContainer');
             const userInput = document.getElementById('userInput');
             const sendBtn = document.getElementById('sendBtn');
@@ -134,6 +137,8 @@
             const questionAudio = document.getElementById('questionAudio');
             const answerAudio = document.getElementById('answerAudio');
             const audioSection = document.getElementById('audioSection');
+const API_ENDPOINT = "https://your-gradio-app-url.com/api/predict"; // Replace with your Gradio API endpoint
+const API_KEY = "YOUR_API_KEY_HERE"; // Replace with your actual API key
 
             // Add message to chat
             function addMessage(text, isUser) {
@@ -168,26 +173,44 @@
                 chatContainer.appendChild(loadingDiv);
                 chatContainer.scrollTop = chatContainer.scrollHeight;
 
-                // Simulate API call (replace with actual API call)
-                setTimeout(() => {
+                try {
+                    // Call GPT API
+                    const response = await fetch("https://your-gradio-app-url.com/api/predict", {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
+                        },
+                        body: JSON.stringify({
+                            data: [
+                                message, // user_input
+                                voiceSelect.value, // voice
+                                parseFloat(speedSelect.value), // speed
+                                [], // history
+                                API_KEY // api_key
+                            ]
+                        })
+                    });
+
+                    const result = await response.json();
+                    const [history, q_audio, a_audio] = result.data;
+
                     // Remove loading
                     chatContainer.removeChild(loadingDiv);
 
-                    // Add bot response (simulated)
-                    const responses = [
-                        "وعليكم السلام، الحمدلله بخير وش اخبارك؟",
-                        "الله يسعدك، كل شي تمام الحين.",
-                        "ياهلا والله، وش الجديد عندك؟",
-                        "الحمدلله على كل حال، عندي اخبار حلوة اليوم."
-                    ];
-                    const randomResponse = responses[Math.floor(Math.random() * responses.length)];
-                    addMessage(randomResponse, false);
+                    // Add bot response
+                    const reply = history[history.length-1][1];
+                    addMessage(reply, false);
 
-                    // Show audio players (simulated)
-                    questionAudio.src = "https://example.com/question.mp3";
-                    answerAudio.src = "https://example.com/answer.mp3";
+                    // Show audio players
+                    questionAudio.src = q_audio;
+                    answerAudio.src = a_audio;
                     audioSection.classList.remove('hidden');
-                }, 1500);
+
+                } catch (error) {
+                    console.error("Error:", error);
+                    chatContainer.removeChild(loadingDiv);
+                    addMessage("حدث خطأ أثناء محاولة الاتصال بالخادم. الرجاء المحاولة لاحقاً.", false);
+                }
             });
 
             // Allow sending with Enter key