Hugging Face's logo

Spaces:
Juno360219
/
sf-d7c
Running

App Files Community
Juno360219 commited on
Commit
e1cf593
•
1 Parent(s): e4c6fa2

Add 3 files

Browse files
Files changed (3) hide show
  1. index.html +13 -19
  2. main.js +56 -0
  3. style.css +32 -21
index.html CHANGED
@@ -1,19 +1,13 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
1
+ <html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>3D Model Viewer</title></head><body>
2
+ <article class="prose">
3
+ <section>
4
+ <h1>3D Model Viewer</h1>
5
+ <p>Upload an image to convert it to a 3D model.</p>
6
+ <p>
7
+ <input type="file" class="underline" placeholder="Select an image" id="inputFile" />
8
+ <button id="uploadButton">Upload</button>
9
+ </p>
10
+ <p id="3dModel"></p>
11
+ </section>
12
+ </article>
13
+ </body></html>
 
 
 
 
 
 
main.js ADDED
@@ -0,0 +1,56 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Import AlpineJS and DaisyUI
2
+ import alpine from "alpinejs";
3
+ import daisyui from "https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css";
4
+
5
+ // Import TailwindCSS
6
+ import tailwind from "https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio";
7
+
8
+ // Import Three.js
9
+ import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js";
10
+
11
+ // Initialize AlpineJS and DaisyUI
12
+ alpine.default();
13
+ daisyui.default();
14
+
15
+ // Initialize TailwindCSS
16
+ tailwind.default();
17
+
18
+ document.addEventListener("alpine:initialized", () => {
19
+ // Create a scene
20
+ const scene = new THREE.Scene();
21
+
22
+ // Create a camera
23
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
24
+
25
+ // Create a renderer
26
+ const renderer = new THREE.WebGLRenderer({
27
+ canvas: document.getElementById("3dModel"),
28
+ });
29
+
30
+ // Set renderer size
31
+ renderer.setSize(window.innerWidth, window.innerHeight);
32
+
33
+ // Add a cube to the scene
34
+ const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
35
+ const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
36
+ const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
37
+ scene.add(cube);
38
+
39
+ // Add a camera to the scene
40
+ scene.add(camera);
41
+
42
+ // Add directional light to the scene
43
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
44
+ directionalLight.position.set(0, 0, 1).normalize();
45
+ scene.add(directionalLight);
46
+
47
+ // Show the scene
48
+ renderer.render(scene, camera);
49
+
50
+ // Animate the scene
51
+ function animate() {
52
+ requestAnimationFrame(animate);
53
+ renderer.render(scene, camera);
54
+ }
55
+ animate();
56
+ });
style.css CHANGED
@@ -1,28 +1,39 @@
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
1
  body {
2
+ margin: 0;
3
+ padding: 0;
4
+ display: flex;
5
+ flex-direction: column;
6
+ align-items: center;
7
+ justify-content: center;
8
+ height: 100vh;
9
+ background-color: #f5f5f5;
10
  }
11
 
12
+ #3dModel {
13
+ width: 480px;
14
+ height: 270px;
15
+ background-color: #000;
16
+ border: 1px solid #ccc;
17
+ margin: 20px;
18
  }
19
 
20
+ #uploadButton {
21
+ margin-left: 20px;
22
+ height: 30px;
23
+ width: 100px;
24
+ background-color: #4ecca3;
25
+ color: #fff;
26
+ border: none;
27
+ border-radius: 5px;
28
  }
29
 
30
+ #inputFile {
31
+ margin-right: 20px;
32
+ height: 30px;
33
+ width: 300px;
34
+ padding: 10px;
35
+ border: none;
36
+ border: 1px solid #ccc;
37
+ border-radius: 5px;
38
+ background-color: #f1f1f1;
39
+ }