Hugging Face's logo

Spaces:
Azdeen
/
deepsite-project
Running

App Files Community
deepsite-project
File size: 5,913 Bytes 
007f821
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31c7c2e
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
 

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مساعد ذكي باللهجة النجدية</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'Tahoma', 'Arial', sans-serif;
        }
        .chat-container {
            max-height: 500px;
            overflow-y: auto;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <div class="bg-white rounded-lg shadow-lg p-6 max-w-3xl mx-auto">
            <h1 class="text-2xl font-bold text-center mb-6 text-gray-800">مساعد ذكي باللهجة النجدية + تحويل النص لصوت</h1>
            
            <div id="chat-container" class="chat-container mb-4 p-4 bg-gray-50 rounded-lg h-64 overflow-y-auto">
                <div class="text-right mb-4">
                    <p class="bg-blue-100 text-blue-800 rounded-lg p-3 inline-block">مرحباً! كيف يمكنني مساعدتك اليوم؟</p>
                </div>
            </div>

            <div class="flex flex-col space-y-4">
                <textarea id="user-input" class="p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3" placeholder="اكتب سؤالك هنا..."></textarea>
                
                <div class="flex flex-col md:flex-row md:space-x-4 space-y-4 md:space-y-0">
                    <select id="voice-select" class="p-2 border rounded-lg">
                        <option value="alloy">صوت عادي</option>
                    </select>
                    
                    <div class="flex-grow">
                        <label for="speed-slider" class="block mb-1">سرعة الكلام: <span id="speed-value">1.0</span></label>
                        <input id="speed-slider" type="range" min="0.5" max="2.0" step="0.1" value="1.0" class="w-full">
                    </div>
                </div>

                <button id="send-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200">
                    إرسال
                </button>

                <audio id="audio-player" controls class="w-full mt-4"></audio>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('speed-slider').addEventListener('input', function() {
            document.getElementById('speed-value').textContent = this.value;
        });

        document.getElementById('send-btn').addEventListener('click', async function() {
            const userInput = document.getElementById('user-input').value;
            const voice = document.getElementById('voice-select').value;
            const speed = document.getElementById('speed-slider').value;
            
            if (!userInput.trim()) return;
            
            const chatContainer = document.getElementById('chat-container');
            
            // Add user message
            chatContainer.innerHTML += `
                <div class="text-left mb-4">
                    <p class="bg-gray-200 text-gray-800 rounded-lg p-3 inline-block">${userInput}</p>
                </div>
            `;
            
            // Show loading indicator
            chatContainer.innerHTML += `
                <div class="text-right mb-4">
                    <p class="bg-blue-100 text-blue-800 rounded-lg p-3 inline-block">...جارٍ المعالجة</p>
                </div>
            `;
            
            chatContainer.scrollTop = chatContainer.scrollHeight;
            
            try {
                const response = await fetch('https://your-api-endpoint.com/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        user_input: userInput,
                        voice: voice,
                        speed: speed
                    })
                });
                
                const data = await response.json();
                
                // Remove loading indicator
                chatContainer.removeChild(chatContainer.lastChild);
                
                // Add assistant response
                chatContainer.innerHTML += `
                    <div class="text-right mb-4">
                        <p class="bg-blue-100 text-blue-800 rounded-lg p-3 inline-block">${data.reply}</p>
                    </div>
                `;
                
                // Play audio if available
                if (data.audio_url) {
                    const audioPlayer = document.getElementById('audio-player');
                    audioPlayer.src = data.audio_url;
                    audioPlayer.play();
                }
                
                // Clear input
                document.getElementById('user-input').value = '';
                chatContainer.scrollTop = chatContainer.scrollHeight;
                
            } catch (error) {
                console.error('Error:', error);
                // Remove loading indicator
                chatContainer.removeChild(chatContainer.lastChild);
                
                // Show error message
                chatContainer.innerHTML += `
                    <div class="text-right mb-4">
                        <p class="bg-red-100 text-red-800 rounded-lg p-3 inline-block">حدث خطأ أثناء المعالجة. يرجى المحاولة مرة أخرى.</p>
                    </div>
                `;
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }
        });
    </script>
</body>
</html>