Hugging Face's logo

Spaces:
ikraamkb
/
Summarization
Running

App Files Community
1
ikraamkb commited on
Commit
6cdb9f4
·
verified ·
1 Parent(s): 2c409b6

Update templates/HomeS.html

Browse files
Files changed (1) hide show
  1. templates/HomeS.html +80 -73
templates/HomeS.html CHANGED
@@ -1,80 +1,87 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AIservices</title>
7
- <link rel="stylesheet" href="/static/appS.css">
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
9
- </head>
10
- <body>
11
- <header class="intro">
12
- <div class="return">
13
- <i class="fa-solid fa-arrow-left"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  </div>
15
- <img src="/resources/aiRobot1.png" alt="AI Assistant Chris">
16
- <span>Hi there , it's <em> Aidan </em> again , give me a document /image and I’ll Summarize/ Caption it</span>
17
- </header>
18
- <div class="explainChoix fade-in">
19
- <span>Choose a mode to either summarize a document (PDF, DOCX, PPTX, XLSX) or caption an image</span>
20
- <button>Got it</button>
21
- </div>
22
- <ul class="select-options">
23
- <li><label><input type="radio" name="mode" value="Summarize"> Summarize</label></li>
24
- <li><label><input type="radio" name="mode" value="Captioning"> Captioning</label></li>
25
- </ul>
26
- <div class="convo">
27
- </div>
28
- <div class="qtdoc">
29
- <div class="CaptionInput active">
30
- <div class="selectImg">
31
- <p>Select an image :</p>
32
- </div>
33
- <div class="captionButtons">
34
- <i class="fa-solid fa-image" id="image-btn" title="Upload image"></i>
35
- <button class="sendingQA">Send</button>
36
- </div>
37
  </div>
38
- <div class="SummarizeInput innactive">
39
- <div class="LengthS">
40
- <p>Summary lenght :</p>
41
- <ul class="select-optionsS">
42
- <li><label><input type="radio" name="lenght" value="Short"> Short</label></li>
43
- <li><label><input type="radio" name="lenght" value="Medium"> Medium</label></li>
44
- <li><label><input type="radio" name="lenght" value="Long"> Long</label></li>
45
- </ul>
46
- </div>
47
- <div class="SummuririzeButtons">
48
  <i class="fa-solid fa-file" id="file-btn" title="Upload file"></i>
49
  <button class="sendingQA">Send</button>
50
- </div>
51
- </div>
52
- </div>
53
-
54
- <input type="file" id="file-upload" accept=".pdf,.doc,.txt" style="display:none">
55
- <input type="file" id="image-upload" accept="image/*" style="display:none">
56
- <script src="/static/appS.js"></script>
57
- <script>
58
- document.addEventListener('DOMContentLoaded', () => {
59
- const fadeElements = document.querySelectorAll('.fade-in');
60
- const isInViewport = (el) => {
61
- const rect = el.getBoundingClientRect();
62
- return (
63
- rect.top <= (window.innerHeight || document.documentElement.clientHeight)
64
- );
65
- };
66
- const runAnimations = () => {
67
- fadeElements.forEach(el => {
68
- if (isInViewport(el)) {
69
- el.classList.add('active');
70
- }
71
- });
72
- };
73
- runAnimations();
74
- window.addEventListener('scroll', runAnimations);
75
  });
76
- </script>
77
- </body>
78
- </html>
79
-
80
-
 
 
 
 
1
  <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AIservices</title>
7
+ <link rel="stylesheet" href="/static/appS.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
9
+ </head>
10
+ <body>
11
+
12
+ <header class="intro">
13
+ <div class="return">
14
+ <i class="fa-solid fa-arrow-left"></i>
15
+ </div>
16
+ <img src="/resources/aiRobot1.png" alt="AI Assistant Aidan">
17
+ <span>Hi there, it's <em> Aidan </em> again, give me a document /image and I’ll Summarize/ Caption it</span>
18
+ </header>
19
+
20
+ <div class="explainChoix fade-in">
21
+ <span>Choose a mode to either summarize a document (PDF, DOCX, PPTX, XLSX) or caption an image</span>
22
+ <button id="got-it-btn">Got it</button> <!-- ✅ Now has ID -->
23
+ </div>
24
+
25
+ <ul class="select-options">
26
+ <li><label><input type="radio" id="summarize-radio" name="mode" value="Summarize" checked> Summarize</label></li> <!-- ✅ Added ID and checked -->
27
+ <li><label><input type="radio" name="mode" value="Captioning"> Captioning</label></li>
28
+ </ul>
29
+
30
+ <div class="convo"></div>
31
+
32
+ <div class="qtdoc">
33
+
34
+ <div class="CaptionInput innactive">
35
+ <div class="selectImg">
36
+ <p>Select an image :</p>
37
  </div>
38
+ <div class="captionButtons">
39
+ <i class="fa-solid fa-image" id="image-btn" title="Upload image"></i>
40
+ <button class="sendingQA">Send</button>
41
+ </div>
42
+ </div>
43
+
44
+ <div class="SummarizeInput active">
45
+ <div class="LengthS">
46
+ <p>Summary length:</p>
47
+ <ul class="select-optionsS">
48
+ <li><label><input type="radio" name="length" value="Short"> Short</label></li> <!-- ✅ Corrected spelling -->
49
+ <li><label><input type="radio" name="length" value="Medium" checked> Medium</label></li>
50
+ <li><label><input type="radio" name="length" value="Long"> Long</label></li>
51
+ </ul>
 
 
 
 
 
 
 
 
52
  </div>
53
+ <div class="SummuririzeButtons">
 
 
 
 
 
 
 
 
 
54
  <i class="fa-solid fa-file" id="file-btn" title="Upload file"></i>
55
  <button class="sendingQA">Send</button>
56
+ </div>
57
+ </div>
58
+
59
+ </div>
60
+
61
+ <!-- ✅ Corrected accept file types -->
62
+ <input type="file" id="file-upload" accept=".pdf,.docx,.pptx,.xlsx" style="display:none">
63
+ <input type="file" id="image-upload" accept="image/*" style="display:none">
64
+
65
+ <script src="/static/appS.js"></script>
66
+
67
+ <script>
68
+ document.addEventListener('DOMContentLoaded', () => {
69
+ const fadeElements = document.querySelectorAll('.fade-in');
70
+ const isInViewport = (el) => {
71
+ const rect = el.getBoundingClientRect();
72
+ return rect.top <= (window.innerHeight || document.documentElement.clientHeight);
73
+ };
74
+ const runAnimations = () => {
75
+ fadeElements.forEach(el => {
76
+ if (isInViewport(el)) {
77
+ el.classList.add('active');
78
+ }
 
 
79
  });
80
+ };
81
+ runAnimations();
82
+ window.addEventListener('scroll', runAnimations);
83
+ });
84
+ </script>
85
+
86
+ </body>
87
+ </html>