Hugging Face's logo

Spaces:
DeepestGaze
/
DeeperGaze
Running

App Files Community
Paar, F. (Ferdinand) commited on
Commit
c8ab699
·
1 Parent(s): 38be7c4

limit textarea to 200 chars and adjust thumbnail sizing

Browse files
Files changed (2) hide show
  1. frontend/index.html +72 -0
  2. frontend/script.js +4 -4
frontend/index.html CHANGED
@@ -85,6 +85,7 @@
85
  id="inputText"
86
  rows="2"
87
  cols="50"
 
88
  placeholder="Enter your text here..."
89
  autofocus
90
  ></textarea>
@@ -323,6 +324,77 @@
323
  }
324
  });
325
  }
 
 
 
326
  </script>
327
  </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
328
  </html>
 
85
  id="inputText"
86
  rows="2"
87
  cols="50"
88
+ maxlength="200"
89
  placeholder="Enter your text here..."
90
  autofocus
91
  ></textarea>
 
324
  }
325
  });
326
  }
327
+ <div class="credits-container">
328
+ Created by Samule - Credits to <a href="https://jessevig.com/" target="_blank">BertViz</a>
329
+ </div>
330
  </script>
331
  </body>
332
+ </html>
333
+
334
+ <!DOCTYPE html>
335
+ <html lang="en">
336
+ <head>
337
+ <meta charset="UTF-8" />
338
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
339
+ <title>DeepGaze</title>
340
+ <link rel="stylesheet" href="static/styles.css" />
341
+ <script src="https://d3js.org/d3.v6.min.js"></script>
342
+ <style>
343
+ /* Process button styling */
344
+ .text-form button {
345
+ background-color: #800000; /* Bordo red */
346
+ color: #fff;
347
+ border: none;
348
+ padding: 8px 12px;
349
+ font-size: 14px;
350
+ border-radius: 4px;
351
+ cursor: pointer;
352
+ }
353
+ /* Info container styling for head and layer display */
354
+ .info-container {
355
+ display: flex;
356
+ align-items: center;
357
+ margin: 5px 0;
358
+ font-size: 0.9rem;
359
+ }
360
+ .info-container .label {
361
+ margin-right: 5px;
362
+ }
363
+ .info-container .number-box {
364
+ border: 1px solid #800000;
365
+ border-radius: 4px;
366
+ padding: 2px 6px;
367
+ font-weight: bold;
368
+ color: #800000;
369
+ min-width: 20px;
370
+ text-align: center;
371
+ }
372
+ .credits-container {
373
+ background-color: #800000;
374
+ padding: 10px 15px;
375
+ border-radius: 8px;
376
+ text-align: center;
377
+ font-family: Arial, sans-serif;
378
+ font-size: 14px;
379
+ color: #ffffff;
380
+ margin: 20px auto;
381
+ width: fit-content;
382
+ box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
383
+ }
384
+ .credits-container a {
385
+ color: #ffcccc;
386
+ text-decoration: none;
387
+ }
388
+ .credits-container a:hover {
389
+ text-decoration: underline;
390
+ }
391
+ </style>
392
+ </head>
393
+ <body>
394
+ <!-- Your existing content remains unchanged -->
395
+
396
+ <div class="credits-container">
397
+ Created by Samu and Ferdi - Credits to <a href="https://github.com/jessevig/bertviz" target="_blank">BertViz</a>
398
+ </div>
399
+ </body>
400
  </html>
frontend/script.js CHANGED
@@ -32,7 +32,7 @@ function renderModelView(tokens, attention) {
32
 
33
  const gridContainer = document.createElement("div");
34
  gridContainer.style.display = "grid";
35
- gridContainer.style.gridTemplateColumns = "repeat(12, 120px)";
36
  gridContainer.style.gridGap = "10px";
37
  gridContainer.style.padding = "20px";
38
 
@@ -48,9 +48,9 @@ function renderModelView(tokens, attention) {
48
  }
49
 
50
  function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
51
- const padding = 20;
52
- const tokenHeight = 20;
53
- const width = 120;
54
  // Compute the thumbnail height dynamically based on the number of tokens.
55
  const height = padding * 2 + tokens.length * tokenHeight;
56
  const maxLineWidth = 4;
 
32
 
33
  const gridContainer = document.createElement("div");
34
  gridContainer.style.display = "grid";
35
+ gridContainer.style.gridTemplateColumns = "repeat(12, 80px)";
36
  gridContainer.style.gridGap = "10px";
37
  gridContainer.style.padding = "20px";
38
 
 
48
  }
49
 
50
  function createAttentionThumbnail(tokens, attention, layerIdx, headIdx) {
51
+ const width = 80;
52
+ const tokenHeight = 15;
53
+ const padding = 10;
54
  // Compute the thumbnail height dynamically based on the number of tokens.
55
  const height = padding * 2 + tokens.length * tokenHeight;
56
  const maxLineWidth = 4;