Merge pull request #61 from NingW101/add-term-of-use

Add terms of use page
intel · Oct 21, 2024 · 8c9f1f7 · 8c9f1f7
2 parents fb970ba + 385f0a3
commit 8c9f1f7
Show file tree

Hide file tree

Showing 20 changed files with 805 additions and 340 deletions.
diff --git a/index.html b/index.html
@@ -27,9 +27,9 @@
     </style>
   </head>
 
-  <body class="background-gradient">
+  <body>
     <div id="naviBar" class="sticky top-0 z-50"></div>
-    <div class="container mx-auto 2xl:my-8 w-full">
+    <div class="main-content container mx-auto my-2 2xl:my-8 w-full">
       <section class="flex flex-col px-10 2xl:px-20">
         <div>
           <h1 class="text-shadow-sm">
@@ -119,6 +119,8 @@ <h1 class="text-shadow-sm">
         </div>
       </section>
     </div>
+
+    <footer id="footer"></footer>
   </body>
   <script type="module" src="./js/main.js"></script>
 </html>
diff --git a/js/main.js b/js/main.js
@@ -4,7 +4,7 @@
  *  SPDX-License-Identifier: Apache-2.0
  *-----------------------------------------------------------------------------------------------*/
 
-import { setupNavigBar } from "./navbar.js";
+import { setupNavigBar, setupFooter } from "./navigation.js";
 
 // Used for release to public domain, so the project can be hosted on GitHub Pages or other static hosting services.
 const baseUrl =
@@ -767,3 +767,4 @@ bindFilterChangeEventHandler();
 changeFilterHandler();
 setupVideos();
 setupNavigBar(".");
+setupFooter(".");
diff --git a/js/navbar.js → js/navigation.js b/js/navbar.js → js/navigation.js
diff --git a/samples/image_background_removal/background_removal.js b/samples/image_background_removal/background_removal.js
@@ -7,7 +7,7 @@
 
 import { AutoModel, AutoProcessor, env, RawImage } from "@xenova/transformers";
 
-import { setupNavigBar } from "../../js/navbar.js";
+import { setupNavigBar, setupFooter } from "../../js/navigation.js";
 import {
   changeClass4StatusBar,
   getRequestPrefix,
@@ -26,8 +26,9 @@ import {
 
 import exampleImg from "/assets/person.avif";
 
-// load navigation bar
+// load navigation bar & footer
 setupNavigBar("../..");
+setupFooter("../..");
 
 // Since we will download the model from the Hugging Face Hub, we can skip the local model check
 env.allowLocalModels = VITE_ENV_USE_REMOTE_MODELS ? false : true;

diff --git a/samples/image_background_removal/index.html b/samples/image_background_removal/index.html
@@ -72,7 +72,7 @@
   <body>
     <div id="naviBar" class="sticky top-0 z-50"></div>
 
-    <div class="container mx-auto w-full px-8 lg:px-20">
+    <div class="main-content container mx-auto w-full px-8 lg:px-20">
       <div class="2xl:py-8 py-2">
         <h1 class="text-shadow-sm">
           <span
@@ -212,6 +212,8 @@ <h1 class="text-shadow-sm">
         </div>
       </div>
     </div>
+
+    <footer id="footer"></footer>
   </body>
 
   <script type="module" src="./background_removal.js"></script>

diff --git a/samples/image_to_text/image_to_text.js b/samples/image_to_text/image_to_text.js
@@ -4,7 +4,7 @@
  *  SPDX-License-Identifier: Apache-2.0
  *-----------------------------------------------------------------------------------------------*/
 
-import { setupNavigBar } from "../../js/navbar.js";
+import { setupNavigBar, setupFooter } from "../../js/navigation.js";
 import {
   changeClass4StatusBar,
   defineResourcesObject,
@@ -23,6 +23,7 @@ import { ALL_NEEDED_MODEL_RESOURCES } from "../../config.js";
 import Worker from "../common/worker.js?worker&inline";
 
 setupNavigBar("../..");
+setupFooter("../..");
 
 const worker = new Worker();
 const DEFAULT_CACHE_STORAGE_NAME = "transformers-cache";

diff --git a/samples/image_to_text/index.html b/samples/image_to_text/index.html
@@ -24,7 +24,7 @@
   <body>
     <div id="naviBar" class="sticky top-0 z-50"></div>
 
-    <div class="container mx-auto w-full px-8 lg:px-20">
+    <div class="main-content container mx-auto w-full px-8 lg:px-20">
       <div class="2xl:py-8 py-2">
         <h1 class="text-shadow-sm">
           <span
@@ -312,6 +312,8 @@ <h1 class="text-shadow-sm">
         </div>
       </div>
     </div>
+
+    <footer id="footer"></footer>
   </body>
 
   <script type="module" src="./image_to_text.js"></script>

diff --git a/samples/llm_gemma/gemma.html b/samples/llm_gemma/gemma.html
@@ -37,8 +37,8 @@
   <body>
     <div id="naviBar" class="sticky top-0 z-50"></div>
 
-    <div class="container mx-auto w-full px-8 lg:px-20">
-      <div class="2xl:py-8 py-2">
+    <div class="main-content container mx-auto my-8 w-full px-8 lg:px-20">
+      <div>
         <h1 class="text-shadow-sm">
           <span
             class="font-sans block text-4xl font-extrabold 2xl:text-5xl text-stone-50 text-center"
@@ -372,6 +372,8 @@ <h3>
         </div>
       </div>
     </div>
+
+    <footer id="footer"></footer>
   </body>
 
   <script type="module" src="gemma.js"></script>

diff --git a/samples/llm_gemma/gemma.js b/samples/llm_gemma/gemma.js
@@ -23,7 +23,7 @@ import {
   removeHiddenClass,
   formatBytes
 } from "../common/utility.js";
-import { setupNavigBar } from "../../js/navbar.js";
+import { setupNavigBar, setupFooter } from "../../js/navigation.js";
 import {
   MEDIAPIPE_WASM_FILE_PATH,
   ALL_NEEDED_MODEL_RESOURCES
@@ -258,3 +258,4 @@ document.getElementById("upload").addEventListener("change", function (event) {
 });
 
 setupNavigBar("../..");
+setupFooter("../..");
diff --git a/samples/phi3-webgpu/index.html b/samples/phi3-webgpu/index.html
@@ -5,9 +5,52 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Phi-3 WebGPU</title>
+    <style>
+      .absolute_center {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      body {
+        background: rgba(0, 7, 52, 1) url("/assets/bg.png") center / cover
+          no-repeat fixed;
+        overflow-x: hidden;
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+      }
+
+      .main-content {
+        flex: 1;
+      }
+
+      .divider {
+        width: 95%;
+        margin: 10px auto;
+        height: 1px;
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+
+      footer {
+        padding: 0 10px 10px 10px;
+        margin: 0 auto;
+        text-align: center;
+        border-top: 1px solid transparent;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>
+    <div class="divider"></div>
+    <footer>
+      <a
+        href="../../terms.html"
+        class="text-stone-50/80 hover:text-stone-50 hover:underline hover:underline-offset-4 font-serif font-medium"
+        >Terms of Use</a
+      >
+    </footer>
     <script type="module" src="./src/main.jsx"></script>
   </body>
 </html>
diff --git a/samples/phi3-webgpu/src/index.css b/samples/phi3-webgpu/src/index.css
@@ -29,17 +29,4 @@
   .overflow-wrap-anywhere {
     overflow-wrap: anywhere;
   }
-
-  .absolute_center {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  body {
-    background: rgba(0, 7, 52, 1) url("/assets/bg.png") center / cover no-repeat
-      fixed;
-    overflow-x: hidden;
-  }
 }
diff --git a/samples/question_answering/index.html b/samples/question_answering/index.html
@@ -31,7 +31,7 @@
   <body>
     <div id="naviBar" class="sticky top-0 z-50"></div>
 
-    <div class="container mx-auto w-full px-8 lg:px-20">
+    <div class="main-content container mx-auto w-full px-8 lg:px-20">
       <div class="2xl:py-8 py-2">
         <h1 class="text-shadow-sm">
           <span
@@ -214,6 +214,8 @@ <h1 class="text-shadow-sm">
         </div>
       </section>
     </div>
+
+    <footer id="footer"></footer>
   </body>
 
   <script type="module" src="./question_answering.js"></script>

diff --git a/samples/question_answering/question_answering.js b/samples/question_answering/question_answering.js
@@ -4,7 +4,7 @@
  *  SPDX-License-Identifier: Apache-2.0
  *-----------------------------------------------------------------------------------------------*/
 
-import { setupNavigBar } from "../../js/navbar.js";
+import { setupNavigBar, setupFooter } from "../../js/navigation.js";
 import {
   changeClass4StatusBar,
   getElementId4Resource,
@@ -20,6 +20,7 @@ import Worker from "../common/worker.js?worker&inline";
 import { ALL_NEEDED_MODEL_RESOURCES } from "../../config.js";
 
 setupNavigBar("../..");
+setupFooter("../..");
 
 const worker = new Worker();
 

diff --git a/samples/stable_diffusion/stable-diffusion.html b/samples/stable_diffusion/stable-diffusion.html
@@ -64,7 +64,7 @@
   <body>
     <div id="naviBar" class="sticky top-0 z-50"></div>
 
-    <div class="container mx-auto my-8 w-full px-8 lg:px-20">
+    <div class="main-content container mx-auto my-8 w-full px-8 lg:px-20">
       <div>
         <h1 class="text-shadow-sm">
           <span
@@ -536,6 +536,8 @@ <h1 class="text-shadow-sm">
 
       <div id="status" style="font: 1em consolas"></div>
     </div>
+
+    <footer id="footer"></footer>
   </body>
 
   <script type="module" src="./stable-diffusion.js"></script>

diff --git a/samples/stable_diffusion/stable-diffusion.js b/samples/stable_diffusion/stable-diffusion.js
@@ -7,7 +7,7 @@
 /* eslint-disable no-unused-vars */
 
 import { AutoTokenizer, env } from "@xenova/transformers";
-import { setupNavigBar } from "../../js/navbar.js";
+import { setupNavigBar, setupFooter } from "../../js/navigation.js";
 import {
   changeClass4StatusBar,
   getRequestPrefix,
@@ -16,8 +16,9 @@ import {
 } from "../common/utility.js";
 import { ALL_NEEDED_MODEL_RESOURCES } from "../../config.js";
 
-// load navigation bar
+// load navigation bar & footer
 setupNavigBar("../..");
+setupFooter("../..");
 
 if (VITE_ENV_USE_REMOTE_MODELS) {
   env.allowLocalModels = false;