ModelMonitor/index.html at main · Keith11-1313/ModelMonitor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>April in AI — 2026 Model Release Tracker</title>
  <meta name="description" content="Week-by-week tracker of major AI model releases in April 2026. Featuring DeepSeek, GPT-5.5, Qwen, Llama 4, Claude, and more." />

  <!-- React + ReactDOM (production CDN) -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

  <!-- Babel standalone — transpiles JSX in the browser (no build step needed) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <!-- IBM Plex fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;600&family=IBM+Plex+Serif:wght@300;400&display=swap" rel="stylesheet" />

  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: #ffffff; font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; }
  </style>
</head>
<body>
  <div id="root"></div>

  <!--
    Fetch index.jsx as text, transpile with Babel, eval it, then mount.
    This avoids the limitations of Babel standalone's external src loading.
  -->
  <script>
    fetch('./index.jsx')
      .then(r => r.text())
      .then(src => {
        const transformed = Babel.transform(src, { presets: ['react'] }).code;
        // Append a line that leaks App into the global scope before mounting,
        // because new Function() runs in its own isolated scope.
        // eslint-disable-next-line no-new-func
        new Function(transformed + '\nwindow.App = App;')();
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(React.createElement(window.App));
      })
      .catch(err => {
        document.getElementById('root').innerHTML =
          '<div style="color:#f87171;font-family:monospace;padding:40px">Failed to load app: ' + err + '</div>';
      });
  </script>
</body>
</html>