Hugging Face's logo

Spaces:
Azdeen
/
deepsite-project
Running

App Files Community
Azdeen commited on
Commit
007f821
·
verified ·
1 Parent(s): 996d96b

شيشسيش

Browse files
Files changed (1) hide show
  1. index.html +135 -18
index.html CHANGED
@@ -1,19 +1,136 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="ar" dir="rtl">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>مساعد ذكي باللهجة النجدية</title>
8
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ background-color: #f5f5f5;
12
+ font-family: 'Tahoma', 'Arial', sans-serif;
13
+ }
14
+ .chat-container {
15
+ max-height: 500px;
16
+ overflow-y: auto;
17
+ }
18
+ </style>
19
+ </head>
20
+ <body class="bg-gray-100">
21
+ <div class="container mx-auto p-4">
22
+ <div class="bg-white rounded-lg shadow-lg p-6 max-w-3xl mx-auto">
23
+ <h1 class="text-2xl font-bold text-center mb-6 text-gray-800">مساعد ذكي باللهجة النجدية + تحويل النص لصوت</h1>
24
+
25
+ <div id="chat-container" class="chat-container mb-4 p-4 bg-gray-50 rounded-lg h-64 overflow-y-auto">
26
+ <div class="text-right mb-4">
27
+ <p class="bg-blue-100 text-blue-800 rounded-lg p-3 inline-block">مرحباً! كيف يمكنني مساعدتك اليوم؟</p>
28
+ </div>
29
+ </div>
30
+
31
+ <div class="flex flex-col space-y-4">
32
+ <textarea id="user-input" class="p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3" placeholder="اكتب سؤالك هنا..."></textarea>
33
+
34
+ <div class="flex flex-col md:flex-row md:space-x-4 space-y-4 md:space-y-0">
35
+ <select id="voice-select" class="p-2 border rounded-lg">
36
+ <option value="alloy">صوت عادي</option>
37
+ </select>
38
+
39
+ <div class="flex-grow">
40
+ <label for="speed-slider" class="block mb-1">سرعة الكلام: <span id="speed-value">1.0</span></label>
41
+ <input id="speed-slider" type="range" min="0.5" max="2.0" step="0.1" value="1.0" class="w-full">
42
+ </div>
43
+ </div>
44
+
45
+ <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">
46
+ إرسال
47
+ </button>
48
+
49
+ <audio id="audio-player" controls class="w-full mt-4"></audio>
50
+ </div>
51
+ </div>
52
+ </div>
53
+
54
+ <script>
55
+ document.getElementById('speed-slider').addEventListener('input', function() {
56
+ document.getElementById('speed-value').textContent = this.value;
57
+ });
58
+
59
+ document.getElementById('send-btn').addEventListener('click', async function() {
60
+ const userInput = document.getElementById('user-input').value;
61
+ const voice = document.getElementById('voice-select').value;
62
+ const speed = document.getElementById('speed-slider').value;
63
+
64
+ if (!userInput.trim()) return;
65
+
66
+ const chatContainer = document.getElementById('chat-container');
67
+
68
+ // Add user message
69
+ chatContainer.innerHTML += `
70
+ <div class="text-left mb-4">
71
+ <p class="bg-gray-200 text-gray-800 rounded-lg p-3 inline-block">${userInput}</p>
72
+ </div>
73
+ `;
74
+
75
+ // Show loading indicator
76
+ chatContainer.innerHTML += `
77
+ <div class="text-right mb-4">
78
+ <p class="bg-blue-100 text-blue-800 rounded-lg p-3 inline-block">...جارٍ المعالجة</p>
79
+ </div>
80
+ `;
81
+
82
+ chatContainer.scrollTop = chatContainer.scrollHeight;
83
+
84
+ try {
85
+ const response = await fetch('https://your-api-endpoint.com/chat', {
86
+ method: 'POST',
87
+ headers: {
88
+ 'Content-Type': 'application/json',
89
+ },
90
+ body: JSON.stringify({
91
+ user_input: userInput,
92
+ voice: voice,
93
+ speed: speed
94
+ })
95
+ });
96
+
97
+ const data = await response.json();
98
+
99
+ // Remove loading indicator
100
+ chatContainer.removeChild(chatContainer.lastChild);
101
+
102
+ // Add assistant response
103
+ chatContainer.innerHTML += `
104
+ <div class="text-right mb-4">
105
+ <p class="bg-blue-100 text-blue-800 rounded-lg p-3 inline-block">${data.reply}</p>
106
+ </div>
107
+ `;
108
+
109
+ // Play audio if available
110
+ if (data.audio_url) {
111
+ const audioPlayer = document.getElementById('audio-player');
112
+ audioPlayer.src = data.audio_url;
113
+ audioPlayer.play();
114
+ }
115
+
116
+ // Clear input
117
+ document.getElementById('user-input').value = '';
118
+ chatContainer.scrollTop = chatContainer.scrollHeight;
119
+
120
+ } catch (error) {
121
+ console.error('Error:', error);
122
+ // Remove loading indicator
123
+ chatContainer.removeChild(chatContainer.lastChild);
124
+
125
+ // Show error message
126
+ chatContainer.innerHTML += `
127
+ <div class="text-right mb-4">
128
+ <p class="bg-red-100 text-red-800 rounded-lg p-3 inline-block">حدث خطأ أثناء المعالجة. يرجى المحاولة مرة أخرى.</p>
129
+ </div>
130
+ `;
131
+ chatContainer.scrollTop = chatContainer.scrollHeight;
132
+ }
133
+ });
134
+ </script>
135
+ </body>
136
  </html>