frontend

kharshita590 · Oct 17, 2024 · 3008478 · 3008478
commit 3008478
Show file tree

Hide file tree

Showing 36 changed files with 27,803 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# ar-converter-frontend
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "ar-food-menu-sample-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@google/model-viewer": "^1.9.2",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.7",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-iframe": "^1.8.5",
+    "react-router-dom": "^6.27.0",
+    "react-scripts": "5.0.0",
+    "swr": "^2.2.5",
+    "web-vitals": "^2.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/assets/models/android/cheeseburger.glb b/public/assets/models/android/cheeseburger.glb
diff --git a/public/assets/models/android/farmhouse_scramble-olive__finch.glb b/public/assets/models/android/farmhouse_scramble-olive__finch.glb
diff --git a/public/assets/models/android/filipino_breakfast.glb b/public/assets/models/android/filipino_breakfast.glb
diff --git a/public/assets/models/android/pizza_bigboss_pancho_scene.glb b/public/assets/models/android/pizza_bigboss_pancho_scene.glb
diff --git a/public/assets/models/android/salad_head_scene.glb b/public/assets/models/android/salad_head_scene.glb
diff --git a/public/assets/models/android/salmon_tartine_scene.glb b/public/assets/models/android/salmon_tartine_scene.glb
diff --git a/public/assets/models/ios/Farmhouse_Scramble-Olive__Finch.usdz b/public/assets/models/ios/Farmhouse_Scramble-Olive__Finch.usdz
diff --git a/public/assets/models/ios/Pizza_BigBoss_Pancho.usdz b/public/assets/models/ios/Pizza_BigBoss_Pancho.usdz
diff --git a/public/assets/models/ios/Salad_head.usdz b/public/assets/models/ios/Salad_head.usdz
diff --git a/public/assets/models/ios/Salmon_tartine.usdz b/public/assets/models/ios/Salmon_tartine.usdz
diff --git a/public/assets/models/ios/Simple_Cheeseburger.usdz b/public/assets/models/ios/Simple_Cheeseburger.usdz
diff --git a/public/assets/models/ios/filipino_breakfast.usdz b/public/assets/models/ios/filipino_breakfast.usdz
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
+        <script src="./_model-viewer_ Interactive Example_files/focus-visible.js.download" defer=""></script>
+        <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,10 @@
+.App {
+  text-align: center;
+}
+
+.header{
+  background-color: black;
+  color:white;
+  padding: 1em;
+  font-size: larger;
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,20 @@
+import "./App.css";
+import MenuItem from "./components/menu-item/menu-item";
+import Arjs from "./components/ar";
+import FileUpload from "./components/form-upload/upload";
+import Change3d from "./components/form-upload/change3d";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route  path="/" element={<FileUpload />} />
+        <Route  path="/home" element={<Arjs />} />
+        <Route  path="/model/:id" element={<Change3d />} />
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
diff --git a/src/components/ar.js b/src/components/ar.js
@@ -0,0 +1,48 @@
+import '../App.css';
+import MenuItem from './menu-item/menu-item';
+function Arjs() {
+  return (
+    <div className="App">
+      <div className="header">AR Food Menu App</div>
+      {/* <model-viewer 
+        src="https://modelviewer.dev/shared-assets/models/Astronaut.glb" 
+        ios-src="https://developer.apple.com/augmented-reality/quick-look/models/biplane/toy_biplane.usdz"
+        camera-controls 
+        ar
+        xr-environment
+        alt="Cheese Burger Model"></model-viewer> */}
+        <MenuItem 
+        androidSource="assets\models\android\salmon_tartine_scene.glb"
+        iosSource="assets\models\ios\Salmon_tartine.usdz"
+        alternateName="Salmon Tartine"
+        />
+        <MenuItem 
+        androidSource="assets\models\android\pizza_bigboss_pancho_scene.glb"
+        iosSource="assets\models\ios\Pizza_BigBoss_Pancho.usdz"
+        alternateName="Pizza"
+        />
+        <MenuItem 
+        androidSource="assets\models\android\salad_head_Scene.glb"
+        iosSource="assets\models\ios\Salad_head.usdz"
+        alternateName="Fruit and Veggie Salad"
+        />
+        <MenuItem 
+        androidSource="assets\models\android\filipino_breakfast.glb"
+        iosSource="assets\models\ios\filipino_breakfast.usdz"
+        alternateName="Filipino Breakfast"
+        />
+        <MenuItem 
+        androidSource="assets\models\android\farmhouse_scramble-olive__finch.glb"
+        iosSource="assets\models\ios\Farmhouse_Scramble-Olive__Finch.usdz"
+        alternateName="Farmhouse Scramble - Olive Finch"
+        />
+        {/* <MenuItem 
+        androidSource="assets\models\android\cheeseburger.glb"
+        iosSource="assets\models\ios\Simple_Cheeseburger.usdz"
+        alternateName="Cheese Burger"
+        /> */}
+    </div>
+  );
+}
+
+export default Arjs;
diff --git a/src/components/form-upload/change3d.js b/src/components/form-upload/change3d.js
@@ -0,0 +1,60 @@
+// import React,{useState,useEffect} from 'react';
+// import axios from 'axios';
+// import MenuItem from "../menu-item/menu-item";
+// import { useLocation } from "react-router-dom";
+// import { useSearchParams } from 'react-router-dom';
+// import Iframe from 'react-iframe';
+// export default function Change3d(){
+//     const [searchParams] = useSearchParams();
+//     const location = useLocation();
+//     const { data } = location.state || {}; 
+//     // const data = searchParams.get('data') ? JSON.parse(decodeURIComponent(searchParams.get('data'))) : null;
+//     // console.log(data)
+//     return (
+//         <main>
+//              <MenuItem 
+//     androidSource={data}
+//     iosSource="assets/models/ios/Salmon_tartine.usdz" 
+//     alternateName="Salmon Tartine" 
+//   />
+
+//         </main>
+//     )
+// }
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import MenuItem from "../menu-item/menu-item";
+import { useParams } from "react-router-dom";  
+
+export default function Change3d() {
+  const { id } = useParams();  
+  const [modelUrl, setModelUrl] = useState(null);
+
+  useEffect(() => {
+
+    const fetchModel = async () => {
+      try {
+        const response = await axios.get(`http://localhost:3002/model/${id}`);
+        setModelUrl(response.data.imgUrl);
+      } catch (error) {
+        console.error("Error fetching the model:", error);
+      }
+    };
+
+    fetchModel();
+  }, [id]);
+
+  return (
+    <main>
+      {modelUrl ? (
+        <MenuItem 
+          androidSource={modelUrl}  
+          iosSource="assets/models/ios/Salmon_tartine.usdz" 
+          alternateName="Salmon Tartine" 
+        />
+      ) : (
+        <p>Loading model...</p>
+      )}
+    </main>
+  );
+}
diff --git a/src/components/form-upload/upload.js b/src/components/form-upload/upload.js
@@ -0,0 +1,86 @@
+import React,{useState} from "react";
+import axios from 'axios';
+import MenuItem from "../menu-item/menu-item";
+import Iframe from "react-iframe";
+import { useNavigate } from "react-router-dom";
+export default function FileUpload(){
+    const navigate = useNavigate();
+    const [files,setFiles] = useState(null);
+    const [msg,setMsg] = useState(null);
+    const [progress,setProgress] = useState({started:false,pc:0});
+    const [data,setData] = useState([]);
+    const [img,setImg] = useState("");
+    const [url,setUrl]=useState()
+
+    const uploadFile=async()=>{
+        if(!files){
+            setMsg("No file uploaded");
+            return;
+        }
+        const fd = new FormData();
+        fd.append("file",files[0]);
+
+        try{
+            const response = await axios.post('http://localhost:3002/api',fd,{
+                header:{
+                    "Content-type":"multipart/form-data",
+                },
+                onUploadProgress:(progressEvent)=>{
+                    setProgress((prevState)=>({
+                      ...prevState,
+                      pc:Math.round((progressEvent.loaded*100)/progressEvent.total),
+                    }));
+                },
+            });
+            setData(response.data);
+            setImg(response.data.imgUrl);
+
+            const queryString = `data=${encodeURIComponent(JSON.stringify(response.data.imgUrl))}`;  
+            const objectId=response.data.idd
+            const url = `http://localhost:3003/model/${objectId}`;  
+            console.log(queryString);
+            setUrl(url)
+            setMsg("Upload completed");
+            // navigate(`/model/${objectId}`)
+        }catch(error){
+            console.log(error);
+            setMsg("error occured");
+        }
+
+
+    }
+    return (
+        <main>
+              <div className="flex flex-col space-y-12 justify-center items-center mt-[12rem]">
+        <input
+          onChange={(e) => {
+            setFiles(e.target.files);
+          }}
+          type="file"
+          className=""
+        />
+        <button
+          onClick={uploadFile}
+          className="w-28 h-10 rounded-md font-mono bg-red-300"
+        >
+          Submit
+        </button>
+        {progress.started && (
+          <progress max="100" value={progress.pc}></progress>
+        )}
+        {msg && <span>{msg}</span>}
+      </div>
+
+  <MenuItem 
+    androidSource={img}
+    iosSource="assets/models/ios/Salmon_tartine.usdz" 
+    alternateName="Salmon Tartine" 
+  />
+     <a href={url} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">
+        Go to Model
+      </a>
+ <Iframe src={url} width="500px" height="500px"/>
+        </main>
+    )
+
+}
diff --git a/src/components/menu-item/menu-item.css b/src/components/menu-item/menu-item.css
@@ -0,0 +1,14 @@
+.menu-item {
+    margin: 1em 0em;
+    box-shadow: 0.1em 0em 0.5em lightgray;
+}
+.item-details{
+    text-align: left;
+    padding: 1em;
+    background-color: black;
+    color:white;
+}
+model-viewer {
+    width: 100%;
+    height: 15em;
+}
diff --git a/src/components/menu-item/menu-item.jsx b/src/components/menu-item/menu-item.jsx
@@ -0,0 +1,18 @@
+import './menu-item.css'
+
+function MenuItem (props) {
+    return (
+      <div className="menu-item">
+        <model-viewer
+          src={props.androidSource}
+          ios-src={props.iosSource}
+          camera-controls 
+          ar
+          xr-environment
+          alt={props.alternateName}></model-viewer>
+          <div className="item-details">{props.alternateName}</div>
+      </div>
+    );
+  }
+
+  export default MenuItem;