Hugging Face's logo

Spaces:
AyoubZolodick
/
sign
Sleeping

App Files Community
EL GHAFRAOUI AYOUB commited on
Commit
ff47db3
·
1 Parent(s): 4b0e599

C'

Browse files
Files changed (5) hide show
  1. Dockerfile +6 -3
  2. app.py +2 -1
  3. hompage.html +80 -0
  4. main.py +1 -1
  5. templates/test.html +79 -0
Dockerfile CHANGED
@@ -16,8 +16,11 @@ RUN pip install ptvsd
16
  # Install additional Python dependencies
17
  RUN pip install python-multipart opencv-python gunicorn
18
 
19
- # Copy the rest of the application code
20
  COPY . .
21
 
22
- # Specify the command to run the application with Gunicorn
23
- CMD ["gunicorn", "--bind", "0.0.0.0:5000", "main:app"]
 
 
 
 
16
  # Install additional Python dependencies
17
  RUN pip install python-multipart opencv-python gunicorn
18
 
19
+ # Copy the current directory contents into the container at /app
20
  COPY . .
21
 
22
+ # Run the Flask application
23
+ CMD ["python", "app.py"]
24
+
25
+
26
+
app.py CHANGED
@@ -334,4 +334,5 @@ def test_connect():
334
  print('Connected')
335
 
336
  if __name__ == "__main__":
337
- socketio.run(app, debug=False)
 
 
334
  print('Connected')
335
 
336
  if __name__ == "__main__":
337
+ socketio.run(app, debug=True, allow_unsafe_werkzeug=True)
338
+
hompage.html ADDED
@@ -0,0 +1,80 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Mohamed</title>
6
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
7
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
10
+ integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
11
+ crossorigin="anonymous"></script>
12
+
13
+ <script type="text/javascript" src="{{ url_for('static', filename='script.js') }}"></script>
14
+ <!-- Add this to the <head> section of your HTML file -->
15
+
16
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.0/css/dataTables.bootstrap5.min.css">
17
+ <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
18
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
19
+
20
+ <script src="https://cdn.tailwindcss.com"></script>
21
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.css" rel="stylesheet" />
22
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.js"></script>
23
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
24
+ <style>
25
+ html {
26
+ font-family: 'Inter', sans-serif;
27
+ }
28
+ body {
29
+ background-color: #1F2937;
30
+ display: flex;
31
+ justify-content: center;
32
+ align-items: center;
33
+ height: 100vh;
34
+ margin: 0;
35
+ }
36
+ .card {
37
+ max-width: 400px;
38
+ background-color: #4B5563;
39
+ padding: 30px;
40
+ border-radius: 10px;
41
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
42
+ }
43
+ .card h1, .card h2 {
44
+ text-align: center;
45
+ margin-bottom: 20px;
46
+ }
47
+ input, button {
48
+ border: 1px solid #CBD5E0;
49
+ background-color: #4C566A;
50
+ color: #E5E7EB;
51
+ padding: 10px;
52
+ border-radius: 5px;
53
+ transition: all 0.3s ease;
54
+ }
55
+ input:focus, button:focus {
56
+ outline: none;
57
+ border-color: #2563EB;
58
+ }
59
+ button {
60
+ cursor: pointer;
61
+ }
62
+ button:hover {
63
+ background-color: #6B7280;
64
+ }
65
+ </style>
66
+ </head>
67
+
68
+ <body>
69
+ <div class="card">
70
+ <h1 class="text-2xl font-bold">محمد لغة الإشارة</h1>
71
+ <h2 class="text-4xl font-bold">ترجمة اللغة الإشارية</h2>
72
+ <form id="urlForm">
73
+ <input type="text" id="url" name="url" class="text-sm rounded-lg block w-full mb-4" placeholder="أدخل رابط الفيديو هنا..." required>
74
+ </form>
75
+ <button id="startStream" type="button" onclick="startVideo()" class="font-medium rounded-lg text-sm px-5 py-3 bg-gray-800 hover:bg-gray-600 focus:ring-gray-600">URL بث</button>
76
+ <button id="startCamera" type="button" onclick="startCamera()" class="font-medium rounded-lg text-sm px-5 py-3 bg-gray-800 hover:bg-gray-600 focus:ring-gray-600">كاميرا</button>
77
+ </div>
78
+ </body>
79
+
80
+ </html>
main.py CHANGED
@@ -334,5 +334,5 @@ def test_connect():
334
  print('Connected')
335
 
336
  if __name__ == "__main__":
337
- socketio.run(app, allow_unsafe_werkzeug=True)
338
 
 
334
  print('Connected')
335
 
336
  if __name__ == "__main__":
337
+ socketio.run(app, debug=True, allow_unsafe_werkzeug=True)
338
 
templates/test.html ADDED
@@ -0,0 +1,79 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <html lang="en">
2
+ <head>
3
+ <meta charset="UTF-8">
4
+ <title>Mohamed</title>
5
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
6
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
7
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.js"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
9
+ integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
10
+ crossorigin="anonymous"></script>
11
+
12
+
13
+ <!-- Add this to the <head> section of your HTML file -->
14
+
15
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.0/css/dataTables.bootstrap5.min.css">
16
+
17
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
18
+
19
+ <script src="https://cdn.tailwindcss.com"></script>
20
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.css" rel="stylesheet" />
21
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.js"></script>
22
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
23
+ <style>
24
+ html {
25
+ font-family: 'Inter', sans-serif;
26
+ }
27
+ body {
28
+ background-color: #1F2937;
29
+ display: flex;
30
+ justify-content: center;
31
+ align-items: center;
32
+ height: 100vh;
33
+ margin: 0;
34
+ }
35
+ .card {
36
+ max-width: 400px;
37
+ background-color: #4B5563;
38
+ padding: 30px;
39
+ border-radius: 10px;
40
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
41
+ }
42
+ .card h1, .card h2 {
43
+ text-align: center;
44
+ margin-bottom: 20px;
45
+ }
46
+ input, button {
47
+ border: 1px solid #CBD5E0;
48
+ background-color: #4C566A;
49
+ color: #E5E7EB;
50
+ padding: 10px;
51
+ border-radius: 5px;
52
+ transition: all 0.3s ease;
53
+ }
54
+ input:focus, button:focus {
55
+ outline: none;
56
+ border-color: #2563EB;
57
+ }
58
+ button {
59
+ cursor: pointer;
60
+ }
61
+ button:hover {
62
+ background-color: #6B7280;
63
+ }
64
+ </style>
65
+ </head>
66
+
67
+ <body>
68
+ <div class="card">
69
+ <h1 class="text-2xl font-bold">محمد لغة الإشارة</h1>
70
+ <h2 class="text-4xl font-bold">ترجمة اللغة الإشارية</h2>
71
+ <form id="urlForm">
72
+ <input type="text" id="url" name="url" class="text-sm rounded-lg block w-full mb-4" placeholder="أدخل رابط الفيديو هنا..." required>
73
+ </form>
74
+ <button id="startStream" type="button" onclick="startVideo()" class="font-medium rounded-lg text-sm px-5 py-3 bg-gray-800 hover:bg-gray-600 focus:ring-gray-600">URL بث</button>
75
+ <button id="startCamera" type="button" onclick="startCamera()" class="font-medium rounded-lg text-sm px-5 py-3 bg-gray-800 hover:bg-gray-600 focus:ring-gray-600">كاميرا</button>
76
+ </div>
77
+ </body>
78
+
79
+ </html>