Hugging Face's logo

Spaces:
DeepestGaze
/
DeeperGaze
Running

App Files Community
Alleinzellgaenger commited on
Commit
314207d
·
1 Parent(s): 6698e77

Make style changes

Browse files
Files changed (3) hide show
  1. frontend/index.html +80 -71
  2. frontend/script.js +1 -1
  3. frontend/styles.css +33 -15
frontend/index.html CHANGED
@@ -7,86 +7,95 @@
7
  <link rel="stylesheet" href="/static/styles.css" />
8
  </head>
9
  <body>
 
10
  <header>
11
  <h1>DeepGaze</h1>
12
  </header>
13
 
14
- <main>
15
- <!-- About Attention Section -->
16
- <section class="about-section">
17
- <!-- TODO: Add a brief description of attention -->
18
- <h2>About Attention</h2>
19
- <p>
20
- Some sort explainer about attention in transformer networks. Lorem ipsum dolor sit amet,
21
- consectetur adipiscing elit. Donec aliquam justo sit amet porta fermentum. Duis at dui
22
- aliquet massa imperdiet sollicitudin. Pellentesque blandit faucibus scelerisque. Class
23
- aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
24
- </p>
25
- <p>
26
- Etiam vel dui consequat ante lobortis facilisis. Curabitur facilisis enim sed massa
27
- consectetur, et mollis magna suscipit. Vestibulum odio ante, laoreet at mauris eu,
28
- feugiat pretium tortor. Ut condimentum laoreet felis quis rutrum. Proin vel elit a
29
- augue ornare venenatis id nec neque.
30
- </p>
31
- </section>
 
32
 
33
- <!-- Deep Gaze into Attention Heads Section -->
34
- <section class="deep-gaze-section">
35
- <h2>A Deep Gaze into Attention Heads</h2>
36
- <p>Select a layer and a head, and input a token sequence to begin:</p>
37
 
38
- <!-- Layer/Head Selection -->
39
- <form id="headSelection" class="selection-form">
40
- <label for="layers">Choose a layer:</label>
41
- <select name="layers" id="layers">
42
- <option value="1">1</option>
43
- <option value="2">2</option>
44
- <option value="3">3</option>
45
- <option value="4">4</option>
46
- <option value="5">5</option>
47
- <option value="6">6</option>
48
- <option value="7">7</option>
49
- <option value="8">8</option>
50
- <option value="9">9</option>
51
- <option value="10">10</option>
52
- <option value="11">11</option>
53
- <option value="12">12</option>
54
- </select>
55
 
56
- <label for="heads">Choose a head:</label>
57
- <select name="heads" id="heads">
58
- <option value="1">1</option>
59
- <option value="2">2</option>
60
- <option value="3">3</option>
61
- <option value="4">4</option>
62
- <option value="5">5</option>
63
- <option value="6">6</option>
64
- <option value="7">7</option>
65
- <option value="8">8</option>
66
- <option value="9">9</option>
67
- <option value="10">10</option>
68
- <option value="11">11</option>
69
- <option value="12">12</option>
70
- </select>
71
- </form>
72
 
73
- <!-- Text Input & Process Button -->
74
- <form id="textForm" class="text-form">
75
- <textarea
76
- id="inputText"
77
- rows="4"
78
- cols="50"
79
- placeholder="Enter your text here..."
80
- autofocus
81
- ></textarea>
82
- <button type="submit">Process</button>
83
- </form>
84
 
85
- <!-- Output Area -->
86
- <div id="output"></div>
87
- <div id="tokenContainer"></div>
88
- </section>
89
- </main>
 
 
 
 
 
 
 
90
 
91
  <script src="/static/script.js"></script>
92
  </body>
 
7
  <link rel="stylesheet" href="/static/styles.css" />
8
  </head>
9
  <body>
10
+ <!-- A header spanning the full width -->
11
  <header>
12
  <h1>DeepGaze</h1>
13
  </header>
14
 
15
+ <!-- Main container that splits the page into a left main (75%) and right aside (25%) -->
16
+ <div class="container">
17
+ <main>
18
+ <!-- About Attention Section -->
19
+ <section class="about-section">
20
+ <h2>About Attention</h2>
21
+ <p>
22
+ Some sort explainer about attention in transformer networks. Lorem ipsum dolor sit amet,
23
+ consectetur adipiscing elit. Donec aliquam justo sit amet porta fermentum. Duis at dui
24
+ aliquet massa imperdiet sollicitudin. Pellentesque blandit faucibus scelerisque. Class
25
+ aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
26
+ </p>
27
+ <p>
28
+ Etiam vel dui consequat ante lobortis facilisis. Curabitur facilisis enim sed massa
29
+ consectetur, et mollis magna suscipit. Vestibulum odio ante, laoreet at mauris eu,
30
+ feugiat pretium tortor. Ut condimentum laoreet felis quis rutrum. Proin vel elit a
31
+ augue ornare venenatis id nec neque.
32
+ </p>
33
+ </section>
34
 
35
+ <!-- Deep Gaze into Attention Heads Section -->
36
+ <section class="deep-gaze-section">
37
+ <h2>A Deep Gaze into Attention Heads</h2>
38
+ <p>Select a layer and a head, and input a token sequence to begin:</p>
39
 
40
+ <!-- Layer/Head Selection -->
41
+ <form id="headSelection" class="selection-form">
42
+ <label for="layers">Choose a layer:</label>
43
+ <select name="layers" id="layers">
44
+ <option value="1">1</option>
45
+ <option value="2">2</option>
46
+ <option value="3">3</option>
47
+ <option value="4">4</option>
48
+ <option value="5">5</option>
49
+ <option value="6">6</option>
50
+ <option value="7">7</option>
51
+ <option value="8">8</option>
52
+ <option value="9">9</option>
53
+ <option value="10">10</option>
54
+ <option value="11">11</option>
55
+ <option value="12">12</option>
56
+ </select>
57
 
58
+ <label for="heads">Choose a head:</label>
59
+ <select name="heads" id="heads">
60
+ <option value="1">1</option>
61
+ <option value="2">2</option>
62
+ <option value="3">3</option>
63
+ <option value="4">4</option>
64
+ <option value="5">5</option>
65
+ <option value="6">6</option>
66
+ <option value="7">7</option>
67
+ <option value="8">8</option>
68
+ <option value="9">9</option>
69
+ <option value="10">10</option>
70
+ <option value="11">11</option>
71
+ <option value="12">12</option>
72
+ </select>
73
+ </form>
74
 
75
+ <!-- Text Input & Process Button -->
76
+ <form id="textForm" class="text-form">
77
+ <textarea
78
+ id="inputText"
79
+ rows="4"
80
+ cols="50"
81
+ placeholder="Enter your text here..."
82
+ autofocus
83
+ ></textarea>
84
+ <button type="submit">Process</button>
85
+ </form>
86
 
87
+ <!-- Output Area -->
88
+ <div id="output"></div>
89
+ <div id="tokenContainer"></div>
90
+ </section>
91
+ </main>
92
+
93
+ <!-- Right side (25%) to be used for footnotes or left empty -->
94
+ <aside>
95
+ <h3>Footnotes / References</h3>
96
+ <p>You can place footnotes here or leave this area blank.</p>
97
+ </aside>
98
+ </div>
99
 
100
  <script src="/static/script.js"></script>
101
  </body>
frontend/script.js CHANGED
@@ -90,4 +90,4 @@ function resetTokenSizes() {
90
  Array.from(container.children).forEach((span) => {
91
  span.style.fontSize = "16px";
92
  });
93
- }
 
90
  Array.from(container.children).forEach((span) => {
91
  span.style.fontSize = "16px";
92
  });
93
+ }
frontend/styles.css CHANGED
@@ -1,17 +1,19 @@
1
- /* Import Google Fonts if desired */
2
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
3
  @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
 
4
 
 
5
  html, body {
6
  margin: 0;
7
  padding: 0;
8
  font-family: 'Lora', 'Roboto', sans-serif;
9
- background-color: #fffff8; /* Off-white background */
10
  color: #333;
11
  }
12
 
13
- /* Header Styling */
14
  header {
 
15
  background-color: #fff;
16
  padding: 1rem 2rem;
17
  border-bottom: 1px solid #ddd;
@@ -22,14 +24,33 @@ header h1 {
22
  font-size: 1.8rem;
23
  }
24
 
25
- /* Main Container */
26
- main {
27
- max-width: 800px;
28
- margin: 2rem auto;
29
- padding: 0 1rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  }
31
 
32
- /* About Section */
33
  .about-section {
34
  margin-bottom: 2rem;
35
  }
@@ -44,7 +65,6 @@ main {
44
  margin-bottom: 1rem;
45
  }
46
 
47
- /* Deep Gaze Section */
48
  .deep-gaze-section h2 {
49
  font-size: 1.4rem;
50
  margin-bottom: 0.5rem;
@@ -55,14 +75,13 @@ main {
55
  line-height: 1.6;
56
  }
57
 
58
- /* Forms and Textareas */
59
  .selection-form,
60
  .text-form {
61
  margin-bottom: 1.5rem;
62
  }
63
 
64
- .selection-form label,
65
- .text-form label {
66
  margin-right: 0.5rem;
67
  }
68
 
@@ -84,7 +103,6 @@ textarea {
84
  font-size: 1rem;
85
  padding: 0.5rem;
86
  margin-bottom: 1rem;
87
- font-family: 'Roboto', sans-serif;
88
  }
89
 
90
  textarea::placeholder {
@@ -124,7 +142,7 @@ button:hover {
124
  margin-top: 1rem;
125
  }
126
 
127
- /* Token highlighting styles (if desired) */
128
  #tokenContainer span {
129
  cursor: default;
130
  transition: font-size 0.2s ease, color 0.2s ease;
 
 
1
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2
  @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
3
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
4
 
5
+ /* Basic Resets & Body */
6
  html, body {
7
  margin: 0;
8
  padding: 0;
9
  font-family: 'Lora', 'Roboto', sans-serif;
10
+ background-color: #fefdf6; /* Off-white background */
11
  color: #333;
12
  }
13
 
14
+ /* Header spanning full width */
15
  header {
16
+ width: 100%;
17
  background-color: #fff;
18
  padding: 1rem 2rem;
19
  border-bottom: 1px solid #ddd;
 
24
  font-size: 1.8rem;
25
  }
26
 
27
+ /*
28
+ Container that splits the page:
29
+ left (main) ~75%, right (aside) ~25%
30
+ */
31
+ .container {
32
+ display: flex;
33
+ flex-direction: row;
34
+ min-height: calc(100vh - 60px); /* Keep some height below header */
35
+ }
36
+
37
+ /* Main content on the left */
38
+ .container main {
39
+ width: 75%;
40
+ padding: 2rem;
41
+ box-sizing: border-box;
42
+ }
43
+
44
+ /* The aside on the right can be used or left empty */
45
+ .container aside {
46
+ width: 25%;
47
+ border-left: 1px solid #ddd;
48
+ padding: 2rem;
49
+ box-sizing: border-box;
50
+ background-color: #fafafa;
51
  }
52
 
53
+ /* ABOUT / DEEP GAZE SECTIONS */
54
  .about-section {
55
  margin-bottom: 2rem;
56
  }
 
65
  margin-bottom: 1rem;
66
  }
67
 
 
68
  .deep-gaze-section h2 {
69
  font-size: 1.4rem;
70
  margin-bottom: 0.5rem;
 
75
  line-height: 1.6;
76
  }
77
 
78
+ /* Selection & Text Form Styles */
79
  .selection-form,
80
  .text-form {
81
  margin-bottom: 1.5rem;
82
  }
83
 
84
+ .selection-form label {
 
85
  margin-right: 0.5rem;
86
  }
87
 
 
103
  font-size: 1rem;
104
  padding: 0.5rem;
105
  margin-bottom: 1rem;
 
106
  }
107
 
108
  textarea::placeholder {
 
142
  margin-top: 1rem;
143
  }
144
 
145
+ /* Token highlighting styles */
146
  #tokenContainer span {
147
  cursor: default;
148
  transition: font-size 0.2s ease, color 0.2s ease;