Merge pull request #77 from zephyrie/spa_update

zephyrie · web-flow · commit 59f21e7d4d0c · 2025-05-28T16:05:26.000-07:00
Transform Model Zoo to Vue.js SPA with enhanced features
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["@babel/preset-react"]
+  "presets": ["@babel/preset-env"]
 } 
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -50,7 +50,8 @@ jobs:
 
           # Build files
           npm run build
-          npx babel src/model-zoo.js --out-file dist/model-zoo.js --presets=@babel/preset-env,@babel/preset-react --plugins=@babel/plugin-transform-react-jsx
+          # Copy Vue.js file directly (no babel needed for Vue 3)
+          cp src/model-zoo-vue.js dist/src/model-zoo-vue.js
 
           # Build Tailwind CSS explicitly
           npx tailwindcss -i ./assets/css/style.css -o ./dist/assets/css/tailwind.css --minify
diff --git a/model-zoo.html b/model-zoo.html
@@ -17,17 +17,17 @@
 <body class="flex flex-col min-h-screen">
     <!-- #include file="components/header.html" -->
 
-    <main class="flex-grow pt-20">
+    <main class="flex-grow pt-20 bg-gray-50">
         <div id="app"></div>
     </main>
 
     <!-- #include file="components/footer.html" -->
     
-    <!-- React Dependencies -->
-    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
-    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
+    <!-- Vue 3 and Vue Router -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+    <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.prod.js"></script>
     
     <!-- #include file="components/scripts.html" -->
-    <script src="model-zoo.js"></script>
+    <script src="src/model-zoo-vue.js"></script>
 </body>
 </html>
diff --git a/requirements.txt b/requirements.txt
@@ -0,0 +1,10 @@
+beautifulsoup4==4.13.4
+certifi==2025.4.26
+charset-normalizer==3.4.2
+idna==3.10
+markdown==3.8
+pyyaml==6.0.2
+requests==2.32.3
+soupsieve==2.7
+typing-extensions==4.13.2
+urllib3==2.4.0
diff --git a/scripts/build-html.js b/scripts/build-html.js
@@ -38,7 +38,8 @@ function copyStaticAssets() {
         'assets',
         'images',
         'apps',
-        'research'
+        'research',
+        'src'  // Add src directory for Vue files
     ];
     
     // Copy each directory if it exists
@@ -48,6 +49,12 @@ function copyStaticAssets() {
             console.log(`Copied ${dir} to dist`);
         }
     });
+    
+    // Copy model_data.json if it exists
+    if (fs.existsSync('model_data.json')) {
+        fs.copyFileSync('model_data.json', path.join(DIST_DIR, 'model_data.json'));
+        console.log('Copied model_data.json to dist');
+    }
 }
 
 function replaceIncludes(content, components) {
diff --git a/scripts/dev-server.js b/scripts/dev-server.js
@@ -71,7 +71,23 @@ const params = {
 // Start server
 liveServer.start(params);
 
-console.log(`Development server running at http://localhost:${params.port}`);
+const os = require('os');
+const networkInterfaces = os.networkInterfaces();
+const addresses = [];
+
+Object.keys(networkInterfaces).forEach((name) => {
+    networkInterfaces[name].forEach((iface) => {
+        if (iface.family === 'IPv4' && !iface.internal) {
+            addresses.push(iface.address);
+        }
+    });
+});
+
+console.log(`Development server running at:`);
+console.log(`  Local:   http://localhost:${params.port}`);
+addresses.forEach(address => {
+    console.log(`  Network: http://${address}:${params.port}`);
+});
 
 // Watch for component changes
 componentsWatcher.on('change', (filepath) => {
diff --git a/src/model-zoo-vue.js b/src/model-zoo-vue.js
diff --git a/src/model-zoo.js b/src/model-zoo.js

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`{`
`2`		`- "presets": ["@babel/preset-react"]`
	`2`	`+ "presets": ["@babel/preset-env"]`
`3`	`3`	`}`