Spaces:

eaglelandsonce
/

Model_Choice_Fact_or_Fiction

Running

App Files Files Community

eaglelandsonce commited on Aug 11

Commit

3f3115d

verified ·

1 Parent(s): 0c0b91c

Update index.html

Browse files

Files changed (1) hide show

index.html +275 -18

index.html CHANGED Viewed

@@ -1,19 +1,276 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Model Choice: Fact or Fiction</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    :root {
+      --bg1:#c9e8ff; --bg2:#fde2ff; --ink:#222; --ink-sub:#555;
+      --brand:#2563eb; --brand-2:#22c55e; --good:#16a34a; --bad:#dc2626;
+      --card:#ffffffcc;
+    }
+    body {
+      font-family: 'Poppins', sans-serif;
+      background: radial-gradient(1200px 600px at 20% 0%, var(--bg1), transparent 60%),
+                  radial-gradient(1200px 600px at 80% 0%, var(--bg2), transparent 60%),
+                  #f6f7fb;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 2rem 1rem;
+      color: var(--ink);
+    }
+    h1 { text-align: center; margin-bottom: .25rem; font-weight: 600; font-size: 2.2rem; }
+    #subtitle { text-align:center; margin-bottom:1rem; color: var(--ink-sub); }
+    #source-link { text-align: center; margin-bottom: 1.25rem; font-size: .95rem; }
+    #source-link a { color: var(--ink); text-decoration: underline; }
+    #game-container {
+      background: var(--card);
+      width: 100%; max-width: 820px;
+      padding: 2rem; border-radius: 16px;
+      box-shadow: 0 10px 24px rgba(0,0,0,.15);
+      display: flex; flex-direction: column; align-items: center;
+    }
+    .progress-container {
+      width: 100%; background:#ececec; border-radius: 999px; overflow: hidden; margin-bottom: 1rem;
+    }
+    .progress-bar { height: 14px; width:0%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); transition: width .3s ease; }
+    #statement {
+      font-size: 1.25rem; line-height: 1.5; text-align: center; color: #333;
+      min-height: 84px; margin: .75rem 0 1rem;
+    }
+    .btn-group { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin: .25rem 0 1rem; }
+    button {
+      padding: .75rem 1.25rem; border: none; border-radius: 999px; cursor: pointer;
+      background: var(--brand); color: #fff; font-weight: 600; letter-spacing:.2px;
+      transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
+    }
+    button.secondary { background:#111827; }
+    button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.15); }
+    #result {
+      margin-top: .5rem; padding: .75rem 1rem; border-radius: 10px; font-weight: 700; text-align: center; display:none;
+    }
+    #result.correct { display:block; background:#dcfce7; color:#14532d; }
+    #result.incorrect { display:block; background:#fee2e2; color:#7f1d1d; }
+    #explanation {
+      margin-top: .75rem; padding: 1rem; background:#f9fafb; color:#374151; border-radius:12px; display:none;
+    }
+    #score { margin-top: .75rem; font-weight: 700; }
+    #controls { display:flex; gap:.5rem; margin-top:.5rem; }
+    #controls button { background:#0f766e; }
+    #restart-btn { background:#6b21a8; }
+  </style>
+</head>
+<body>
+  <h1>Model Choice: Fact or Fiction</h1>
+  <div id="subtitle">Test your instincts on selecting models in Azure AI Foundry</div>
+  <div id="source-link">
+    Source: <a href="https://learn.microsoft.com/en-us/training/modules/explore-models-azure-ai-studio/2-select-model" target="_blank" rel="noopener">
+      Explore the model catalog → Select a model (Microsoft Learn)
+    </a>
+  </div>
+  <div id="game-container">
+    <div class="progress-container"><div class="progress-bar" id="progress-bar"></div></div>
+    <div id="statement">Loading statement...</div>
+    <div class="btn-group">
+      <button onclick="guess(true)">Fact</button>
+      <button class="secondary" onclick="guess(false)">Fiction</button>
+    </div>
+    <div id="result"></div>
+    <div id="explanation"></div>
+    <div id="controls">
+      <button id="next-btn" style="display:none;" onclick="nextStatement()">Next</button>
+      <button id="restart-btn" style="display:none;" onclick="startGame()">Restart</button>
+    </div>
+    <div id="score"></div>
+  </div>
+  <script>
+    // Grounded statements from Microsoft Learn page (Select a model)
+    // https://learn.microsoft.com/en-us/training/modules/explore-models-azure-ai-studio/2-select-model
+    const statements = [
+      {
+        text: "Azure AI Foundry’s model catalog is a central place to browse models for your use case.",
+        isFact: true,
+        explanation: "The unit states the catalog provides a central repository to find the right model for your generative AI use case."
+      },
+      {
+        text: "You can explore models via Hugging Face, GitHub, and Azure AI Foundry; Foundry makes exploration and deployment easiest.",
+        isFact: true,
+        explanation: "The page lists all three catalogs and notes Foundry eases exploring and deploying a prototype."
+      },
+      {
+        text: "Small Language Models (SLMs) like Phi‑3 or Llama 3 8B are efficient and suitable for edge or lower-end hardware.",
+        isFact: true,
+        explanation: "SLMs are described as cost‑effective and great when cost/speed matter more than model complexity."
+      },
+      {
+        text: "Large Language Models (LLMs) such as GPT‑4, Mistral Large, Llama 3 70B, and Command R+ excel at deep reasoning and complex generation.",
+        isFact: true,
+        explanation: "The unit explicitly calls out these LLMs for deep reasoning and complex content."
+      },
+      {
+        text: "Reasoning models like DeepSeek‑R1 and o1 are suggested for tougher tasks in math, coding, science, strategy, and logistics.",
+        isFact: true,
+        explanation: "Reasoning models are highlighted for higher performance in complex tasks."
+      },
+      {
+        text: "Multimodal models like GPT‑4o and Phi‑3‑Vision handle both text and images.",
+        isFact: true,
+        explanation: "The page explains these models can analyze and generate across modalities."
+      },
+      {
+        text: "DALL·E 3 and Stability AI are text‑to‑image generators for creating visuals.",
+        isFact: true,
+        explanation: "They’re listed as tools for generating realistic images from prompts."
+      },
+      {
+        text: "Embedding models like Ada and Cohere are mainly for semantic search and RAG.",
+        isFact: true,
+        explanation: "They convert text to vectors to power search and recommendation; RAG is a common scenario."
+      },
+      {
+        text: "Function calling and JSON support help models call APIs and handle structured data.",
+        isFact: true,
+        explanation: "The unit notes these capabilities for dynamic tool use and structured outputs."
+      },
+      {
+        text: "Regional/domain models (e.g., Core42 JAIS for Arabic, Nixtla TimeGEN‑1 for time series) can outperform general models in their niches.",
+        isFact: true,
+        explanation: "The page gives these examples and recommends them when you have specific needs."
+      },
+      {
+        text: "Open‑source models aren’t available in Azure AI Foundry’s catalog.",
+        isFact: false,
+        explanation: "Fiction. The page says there are hundreds of open models in the catalog from multiple providers."
+      },
+      {
+        text: "Proprietary models emphasize enterprise security/support; open models emphasize flexibility and fine‑tuning control.",
+        isFact: true,
+        explanation: "The unit contrasts these trade‑offs directly."
+      },
+      {
+        text: "Suggested filter criteria include task type, precision, openness, and deployment.",
+        isFact: true,
+        explanation: "These four characteristics are listed as selection filters."
+      },
+      {
+        text: "In this context, precision is the proportion of true positives among generated outputs.",
+        isFact: true,
+        explanation: "The page defines precision exactly that way for generative AI evaluation."
+      },
+      {
+        text: "Fine‑tuned models can boost precision for specific domains compared to a base model plus prompt engineering alone.",
+        isFact: true,
+        explanation: "The unit contrasts base vs. fine‑tuned models for domain precision."
+      },
+      {
+        text: "Public model benchmarks fully reflect your app’s real‑world performance, so you can skip any custom evaluation.",
+        isFact: false,
+        explanation: "Fiction. Benchmarks help early exploration but give little info about your specific use case."
+      },
+      {
+        text: "Leaderboards/benchmarks track metrics like accuracy, coherence, fluency, groundedness, GPT similarity, quality index, and cost.",
+        isFact: true,
+        explanation: "These metrics are enumerated on the page for comparing models."
+      },
+      {
+        text: "Evaluations can be manual or automated; automated ones can use precision, recall, and F1 with your ground truth.",
+        isFact: true,
+        explanation: "The page recommends starting manual then using automated metrics for scalable comparisons."
+      },
+      {
+        text: "Scaling considerations include deployment location, monitoring/optimization, prompt management, and a GenAIOps lifecycle.",
+        isFact: true,
+        explanation: "All four are listed under ‘Can I scale for real‑world workloads?’"
+      }
+    ];
+    // Game logic (same polished flow as your original)
+    let currentIndex = 0, score = 0, answered = false;
+    function shuffle(arr) {
+      for (let i = arr.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [arr[i], arr[j]] = [arr[j], arr[i]];
+      }
+    }
+    function startGame() {
+      shuffle(statements);
+      currentIndex = 0; score = 0; answered = false;
+      document.getElementById('restart-btn').style.display = 'none';
+      loadStatement(); updateScore();
+    }
+    function loadStatement() {
+      if (currentIndex >= statements.length) return endGame();
+      const s = statements[currentIndex];
+      document.getElementById('statement').textContent = s.text;
+      document.getElementById('result').style.display = 'none';
+      document.getElementById('explanation').style.display = 'none';
+      document.getElementById('next-btn').style.display = 'none';
+      answered = false; updateProgress();
+    }
+    function guess(isFactGuess) {
+      if (answered) return;
+      answered = true;
+      const correct = statements[currentIndex].isFact;
+      const resultEl = document.getElementById('result');
+      if (isFactGuess === correct) {
+        resultEl.textContent = 'Correct!';
+        resultEl.className = 'correct';
+        score++;
+      } else {
+        resultEl.textContent = 'Incorrect!';
+        resultEl.className = 'incorrect';
+      }
+      resultEl.style.display = 'block';
+      const expEl = document.getElementById('explanation');
+      expEl.textContent = statements[currentIndex].explanation + " (See source link above.)";
+      expEl.style.display = 'block';
+      document.getElementById('next-btn').style.display = 'inline-block';
+      updateScore();
+    }
+    function nextStatement() {
+      currentIndex++;
+      if (currentIndex < statements.length) loadStatement();
+      else endGame();
+    }
+    function updateScore() {
+      document.getElementById('score').textContent = `Score: ${score} / ${statements.length}`;
+    }
+    function updateProgress() {
+      document.getElementById('progress-bar').style.width = `${(currentIndex / statements.length) * 100}%`;
+    }
+    function endGame() {
+      const pct = Math.round((score / statements.length) * 100);
+      document.getElementById('statement').textContent =
+        `Game Over! You scored ${score} of ${statements.length} (${pct}%).`;
+      document.getElementById('result').style.display = 'none';
+      document.getElementById('explanation').style.display = 'none';
+      document.getElementById('next-btn').style.display = 'none';
+      document.getElementById('restart-btn').style.display = 'inline-block';
+      document.getElementById('progress-bar').style.width = '100%';
+    }
+    startGame();
+  </script>
+</body>
 </html>