about modelpack

fidoriel · Oct 26, 2024 · 0f191f6 · 0f191f6
1 parent 96bfc5a
commit 0f191f6
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 0 deletions.
diff --git a/frontend/App.tsx b/frontend/App.tsx
@@ -11,6 +11,7 @@ import { NavLink } from "react-router-dom";
 import { Button } from "./components/ui/button";
 import { LoadingSpinner } from "./components/custom-ui/spinner";
 import { BACKEND_BASE_URL } from "./lib/api";
+import AboutModelPack from "./ModelPack";
 
 const ACTIVE_NAV = "text-sm font-medium text-primary";
 const NON_ACTIVE_NAV = "text-sm font-medium text-muted-foreground transition-colors hover:text-primary";
@@ -58,6 +59,9 @@ function Navbar() {
                     <NavLink to="/settings" className={({ isActive }) => (isActive ? ACTIVE_NAV : NON_ACTIVE_NAV)}>
                         Settings
                     </NavLink>
+                    <NavLink to="/modelpack" className={({ isActive }) => (isActive ? ACTIVE_NAV : NON_ACTIVE_NAV)}>
+                        About ModelPack
+                    </NavLink>
                 </nav>
                 <div className="ml-auto flex items-center space-x-4">
                     <Search />
@@ -82,6 +86,7 @@ function App() {
                         <Routes>
                             <Route path="/" element={<Models />} />
                             <Route path="/model/:slug" element={<Model />} />
+                            <Route path="/modelpack" element={<AboutModelPack />} />
                         </Routes>
                     </div>
                 </BrowserRouter>

diff --git a/frontend/ModelPack.tsx b/frontend/ModelPack.tsx
@@ -0,0 +1,105 @@
+import React from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+const AboutModelPack = () => {
+    return (
+        <div className="min-h-screen bg-background text-foreground">
+            <div className="max-w-screen-2xl mx-auto p-6">
+                <div className="flex items-center justify-between mb-8">
+                    <h1 className="text-4xl font-bold">About the ModelPack Format</h1>
+                </div>
+
+                <div className="space-y-6">
+                    <Card className="h-full">
+                        <CardHeader>
+                            <CardTitle>File System First Approach</CardTitle>
+                            <CardDescription>
+                                This platform is designed around the 'modelpack' file format. The database is only used
+                                for caching the information from the file system. If a change is made through the UI,
+                                the corresponding 'modelpack' will also be changed. This keeps the 3D fies independent
+                                from any platform and easily accessible via file systems. The database is filled with
+                                data from the file system. Previews and other complementary information can be managed
+                                via UI.
+                            </CardDescription>
+                        </CardHeader>
+                        <CardContent></CardContent>
+                    </Card>
+                    <Card className="h-full">
+                        <CardHeader>
+                            <CardTitle>Directory Structure</CardTitle>
+                            <CardDescription>Standard ModelPack file organization</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <pre className="bg-muted p-4 rounded-lg overflow-x-auto">
+                                {`my_model.zip/
+├── modelpack.json
+├── README.md
+├── LICENSE.md
+├── files/
+│ ├── model1.obj
+│ ├── model2.stl
+│ └── special_version_subdir/
+│   ├── model3.3mf
+│   ├── model3.step
+├── preview/
+│ ├── model1.obj.png
+│ ├── model2.stl.png
+│ └── special_version_subdir/
+│   ├── model3.3mf.png
+│   ├── model3.step.png
+├── images/
+│ ├── nice_print.png
+│ └── nice_multicolor_print.jpg
+└── assets/
+  ├── readme.txt
+  └── license.pdf`}
+                            </pre>
+                        </CardContent>
+                    </Card>
+
+                    {/* JSON Schema Card */}
+                    <Card className="h-full">
+                        <CardHeader>
+                            <CardTitle>JSON Schema</CardTitle>
+                            <CardDescription>ModelPack format specification</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                            <pre className="bg-muted p-4 rounded-lg overflow-x-auto">
+                                {`{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "ModelPackV0_1",
+  "type": "object",
+  "properties": {
+    "version": {
+      "type": "string",
+      "description": "The version of the ModelPack format."
+    },
+    "title": {
+      "type": "string",
+      "description": "The title of the ModelPack."
+    },
+    "author": {
+      "type": "string",
+      "description": "The author of the ModelPack."
+    },
+    "origin": {
+      "type": "string",
+      "description": "The origin URL of the ModelPack."
+    },
+    "license": {
+      "type": "string",
+      "description": "The license under which the ModelPack is distributed."
+    }
+  },
+  "required": ["version", "title", "author", "origin", "license"]
+}`}
+                            </pre>
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AboutModelPack;