Hugging Face's logo

Spaces:
wamd
/
deepsite-project
Running

App Files Community
deepsite-project
File size: 2,165 Bytes 
6db5c41
4b7b5af
6db5c41
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4b7b5af
 
 
6db5c41
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4b7b5af
 
6db5c41
 
 
4b7b5af
 
6db5c41
 
 
 
 
4b7b5af
 
6db5c41
 
4b7b5af
6db5c41
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
```css
body {
    font-family: 'Tajawal', sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

header {
    text-align: center;
    margin-bottom: 30px;
}

h1 {
    color: #2c3e50;
}

.voice-box {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

textarea {
    width: 100%;
    min-height: 150px;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 16px;
    resize: vertical;
}

.controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

select, button {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 16px;
}

select {
    flex: 1;
    background-color: #f8f9fa;
}

button {
    background-color: #3498db;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #2980b9;
}

.audio-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

audio {
    width: 100%;
}

.btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: #2ecc71;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #27ae60;
}

@media (max-width: 600px) {
    .controls {
        flex-direction: column;
    }
}
```

You'll also need to create a Python backend (app.py) to handle the API requests, but I'll provide that separately if you need it. The current implementation includes:
1. Updated index.html with Arabic welcome message and link to voice generator
2. New voice.html page with voice generation interface
3. New style.css with responsive design and Arabic font support

The voice generation page features:
- Text input area
- Voice selection dropdown
- Generate button 
- Audio player
- Download option
- Responsive design for mobile devices
- RTL support for Arabic text