Add mobile warning message + secure context check.

index.html

@@ -20,23 +20,34 @@
         <div class="background-blob-3"></div>
     </div>
     <div class="container">
-        <h1 class="google-sans-medium">Emoji generator</h1>
-        <p class="text-cta">Translate text to fun combinations of emoji with your own Gemma model ✨</p>
-        <div class="input-container">
-            <input type="text" id="prompt-input" aria-label="Type any phrase and get suggestions" placeholder="Type any phrase and get suggestions">
-            <button disabled type="submit" id="generate-btn" aria-label="Generate emojis">
-                <svg class="arrow" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16">
-                    <path d="M.59 14.59 2 16l8-8-8-8L.59 1.41 7.17 8" fill="#fff" />
-                </svg>
-                <svg class="loader" width="18" height="18" viewBox="0 0 18 18" fill="none"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <circle cx="9" cy="9" r="8" stroke="white" stroke-width="2" />
-                </svg>
-            </button>
+        <div id="main-container">
+            <h1 class="google-sans-medium">Emoji generator</h1>
+            <p class="text-cta">Translate text to fun combinations of emoji with your own Gemma model ✨</p>
+            <div class="input-container">
+                <input type="text" id="prompt-input" aria-label="Type any phrase and get suggestions" placeholder="Type any phrase and get suggestions">
+                <button disabled type="submit" id="generate-btn" aria-label="Generate emojis">
+                    <svg class="arrow" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16">
+                        <path d="M.59 14.59 2 16l8-8-8-8L.59 1.41 7.17 8" fill="#fff" />
+                    </svg>
+                    <svg class="loader" width="18" height="18" viewBox="0 0 18 18" fill="none"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="9" cy="9" r="8" stroke="white" stroke-width="2" />
+                    </svg>
+                </button>
+            </div>
+            <div class="output-container">
+                <div id="response-output" class="response-box"></div>
+                <div id="status-message">Loading model...</div>
+            </div>
         </div>
-        <div class="output-container">
-            <div id="response-output" class="response-box"></div>
-            <div id="status-message">Loading model...</div>
+        <div id="warning-message-mobile" style="display: none;">
+            <h3 class="google-sans-medium">Emoji generator</h3>
+            <p class="warning-message-cta">This demo may not
+                load correctly on
+                mobile devices.</p>
+            <p class="warning-message-cta-alt">Please open it on desktop 💻</p>
+            <p class="warning-message-cta-alt">or</p>
+            <a class="warning-message-cta-alt" id="proceed-anyway-btn">proceed anyway.</a>
         </div>
     </div>
     <div class="footer">
@@ -49,4 +60,4 @@
     <script type="module" src="script.js"></script>
 </body>
 
-</html>
+</html>

script.js

@@ -3,6 +3,8 @@ const generateBtn = document.getElementById("generate-btn");
 const promptInput = document.getElementById("prompt-input");
 const responseOutput = document.getElementById("response-output");
 const statusMessageContainer = document.getElementById("status-message");
+const warningMessageContainerForMobile = document.getElementById("warning-message-mobile");
+const mainContainer = document.getElementById("main-container");
 
 const workerPath = './worker.js';
 let worker;
@@ -26,11 +28,20 @@ function createEmojiButton(result) {
 // Check for WebGPU availability and displays an error message if it's not available
 function checkWebGPU() {
   if (!navigator.gpu) {
-    statusMessageContainer.innerHTML = `
+    let message = `
       This application requires WebGPU to run the model in your browser.
       Please update your browser to enable WebGPU support, try a different browser (like Chrome or Edge, version 113+), or ensure your GPU drivers are up to date.</br></br>
-      For more details, read the <a href="https://github.com/gpuweb/gpuweb/wiki/Implementation-Status" target="_blank" style="f; color: #286aac">WebGPU Implementation Status</a>.
+      For more details, read the <a href="https://github.com/gpuweb/gpuweb/wiki/Implementation-Status" target="_blank" style="color: #286aac">WebGPU Implementation Status</a>.
     `;
+
+    if (!window.isSecureContext) {
+      message += `
+        <br/><br/>
+        <strong>Note:</strong> WebGPU requires a secure context. Please access this page over HTTPS or from 'localhost'. Accessing a local server via its IP address also requires an HTTPS setup in many instances (e.g. iOS26 Safari).
+      `;
+    }
+
+    statusMessageContainer.innerHTML = message;
     generateBtn.disabled = true;
     return false;
   }
@@ -72,6 +83,7 @@ async function initializeModelInWorker() {
         generateBtn.disabled = false;             // Enable the generation button upon model load
         setTimeout(() => { 
           statusMessageContainer.innerHTML = ``;  // Then empty status message
+          warningMessageContainerForMobile.innerHTML = ``;  // Then empty warning message
         }, 500);
         break;
       
@@ -121,6 +133,10 @@ function responseComplete() {
   }
 }
 
+function isMobile() {
+  return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+}
+
 function resetUI() {
   console.log("[UI] Resetting UI state.");
   generateBtn.classList.add('generating');
@@ -154,7 +170,18 @@ async function generateResponse() {
 async function initializeAndAttachListeners() {
   console.log("[UI] Starting initialization and attaching listeners.");
 
-  await initializeModelInWorker();
+  if (isMobile()) {
+    mainContainer.style.display = 'none';
+    warningMessageContainerForMobile.style.display = '';
+    const proceedButton = document.getElementById('proceed-anyway-btn');
+    proceedButton.addEventListener('click', async () => {
+      mainContainer.style.display = '';
+      warningMessageContainerForMobile.style.display = 'none';
+      await initializeModelInWorker();
+    });
+  } else {
+    await initializeModelInWorker();
+  }
 
   generateBtn.addEventListener("click", generateResponse);
 

style.css

@@ -72,6 +72,15 @@ body,html {
   margin: auto 0;
 }
 
+#main-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 h1 {
   margin-top: 0;
   font-size: 51px;
@@ -174,7 +183,7 @@ h2 {
     transform: scale(1);
   }
 }
-#status-message {
+#status-message, #warning-message {
   text-align: center;
 }
 /* Button styles for the generate button */
@@ -418,4 +427,48 @@ p {
     font-size: 24px;
   }
 }
+
+#warning-message-mobile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+#warning-message-mobile h3 {
+    font-family: 'Google Sans';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 100%;
+    text-align: center;
+    letter-spacing: -1.30014px;
+    color: #1064D3;
+}
+
+#warning-message-mobile .warning-message-cta {
+    font-family: 'Google Sans';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 32px;
+    line-height: 100%;
+    text-align: center;
+    letter-spacing: -1.30014px;
+    color: #000000;
+    margin-top: 6px;
+    max-width: 320px;
+    margin-bottom: 50px;
+}
+
+#warning-message-mobile .warning-message-cta-alt {
+    font-family: 'Google Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 140%;
+    text-align: center;
+    color: #327AC3;
+}
+a.warning-message-cta-alt {
+  text-decoration: underline;
 }