Hugging Face's logo

Spaces:
BluechipTechnologiesAsia
/
Image-Audio-Description
Runtime error

App Files Community
BluechipTechnologiesAsia commited on
Commit
80e9baf
·
verified ·
1 Parent(s): e883af9

Upload 2 files

Browse files
Files changed (2) hide show
  1. templates/index.html +50 -9
  2. templates/result.html +43 -6
templates/index.html CHANGED
@@ -2,16 +2,57 @@
2
  <html>
3
  <head>
4
  <title>Image Audio Description</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  </head>
6
  <body>
7
- <h1>Upload an Image</h1>
8
- <form method="POST" enctype="multipart/form-data">
9
- <input type="file" name="image" accept="image/*">
10
- <br>
11
- <input type="submit" value="Generate audio description">
12
- </form>
13
- {% if message %}
14
- <p style="color: red;">{{ message }}</p>
15
- {% endif %}
 
 
 
 
 
16
  </body>
17
  </html>
 
 
2
  <html>
3
  <head>
4
  <title>Image Audio Description</title>
5
+ <style>
6
+ body {
7
+ background-color: #000; /* Black background */
8
+ color: #90EE90; /* Light green text */
9
+ margin: 0; /* Remove default margin */
10
+ font-family: Arial, sans-serif; /* Set a default font */
11
+ }
12
+
13
+ .container {
14
+ width: 80%; /* Define a container width */
15
+ margin: 0 auto; /* Center the container horizontally */
16
+ padding: 20px; /* Add some padding */
17
+ }
18
+
19
+ h1, h2, p {
20
+ text-align: center; /* Center all headings and paragraphs */
21
+ }
22
+
23
+ .error {
24
+ color: red; /* Error message color */
25
+ }
26
+
27
+ .nav-bar {
28
+ background-color: #000; /* Black navbar background */
29
+ color: #90EE90; /* Light green text */
30
+ display: flex; /* Allow elements to sit side-by-side */
31
+ justify-content: space-between; /* Space elements evenly */
32
+ padding: 10px 20px; /* Add padding */
33
+ }
34
+
35
+ .logo {
36
+ width: 100px; /* Adjust logo width as needed */
37
+ height: auto; /* Maintain aspect ratio */
38
+ }
39
+ </style>
40
  </head>
41
  <body>
42
+ <div class="nav-bar">
43
+ <img src="logo.png" alt="Logo" class="logo">
44
+ </div>
45
+ <div class="container">
46
+ <h1>Upload an Image</h1>
47
+ <form method="POST" enctype="multipart/form-data">
48
+ <input type="file" name="image" accept="image/*">
49
+ <br>
50
+ <input type="submit" value="Generate audio description">
51
+ </form>
52
+ {% if message %}
53
+ <p class="error">{{ message }}</p>
54
+ {% endif %}
55
+ </div>
56
  </body>
57
  </html>
58
+
templates/result.html CHANGED
@@ -2,13 +2,50 @@
2
  <html>
3
  <head>
4
  <title>Image Audio Description</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  </head>
6
  <body>
7
- <h1>Image Caption</h1>
8
- <p>{{ caption }}</p>
9
- <img src="data:image/png;base64,{{ image }}" alt="Uploaded Image"> <br>
10
- <audio controls>
11
- <source src="{{ audio_path }}" type="audio/wav">
12
- </audio>
 
 
 
 
 
 
13
  </body>
14
  </html>
 
2
  <html>
3
  <head>
4
  <title>Image Audio Description</title>
5
+ <style>
6
+ body {
7
+ background-color: #000; /* Black background */
8
+ color: #90EE90; /* Light green text */
9
+ margin: 0; /* Remove default margin */
10
+ font-family: Arial, sans-serif; /* Set a default font */
11
+ }
12
+
13
+ .container {
14
+ width: 80%; /* Define a container width */
15
+ margin: 0 auto; /* Center the container horizontally */
16
+ padding: 20px; /* Add some padding */
17
+ }
18
+
19
+ h1, h2, p {
20
+ text-align: center; /* Center all headings and paragraphs */
21
+ }
22
+
23
+ .nav-bar {
24
+ background-color: #000; /* Black navbar background */
25
+ color: #90EE90; /* Light green text */
26
+ display: flex; /* Allow elements to sit side-by-side */
27
+ justify-content: space-between; /* Space elements evenly */
28
+ padding: 10px 20px; /* Add padding */
29
+ }
30
+
31
+ .logo {
32
+ width: 100px; /* Adjust logo width as needed */
33
+ height: auto; /* Maintain aspect ratio */
34
+ }
35
+ </style>
36
  </head>
37
  <body>
38
+ <div class="nav-bar">
39
+ <img src="logo.png" alt="Logo" class="logo">
40
+ </div>
41
+ <div class="container">
42
+ <h1>Image Caption</h1>
43
+ <p>{{ caption }}</p>
44
+ <img src="data:image/png;base64,{{ image }}" alt="Uploaded Image">
45
+ <br>
46
+ <audio controls>
47
+ <source src="{{ audio_path }}" type="audio/wav">
48
+ </audio>
49
+ </div>
50
  </body>
51
  </html>