Hugging Face's logo

Spaces:
vish85521
/
trip33
Sleeping

App Files Community
vish85521 commited on
Commit
fb9b836
·
verified ·
1 Parent(s): 7c994e3

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +87 -0
index.html ADDED
@@ -0,0 +1,87 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TripoSR Free CPU API</title>
7
+ <style>
8
+ body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; }
9
+ .form-group { margin-bottom: 15px; }
10
+ label { display: block; font-weight: bold; margin-bottom: 5px; }
11
+ input[type="file"] { display: block; margin-bottom: 10px; }
12
+ button { padding: 10px 20px; background-color: #007bff; color: white; border: none; cursor: pointer; font-size: 16px; }
13
+ button:disabled { background-color: #cccccc; }
14
+ #status { margin-top: 20px; font-weight: bold; }
15
+ #result { margin-top: 20px; }
16
+ a.download-btn { display: inline-block; padding: 10px 20px; background-color: #28a745; color: white; text-decoration: none; border-radius: 5px; }
17
+ </style>
18
+ </head>
19
+ <body>
20
+
21
+ <h2>TripoSR 3D Generator</h2>
22
+ <p>Upload a single image. The server will remove the background and generate a 3D model.</p>
23
+
24
+ <form id="uploadForm">
25
+ <div class="form-group">
26
+ <label for="image">Upload Image:</label>
27
+ <input type="file" id="image" accept="image/*" required>
28
+ </div>
29
+ <button type="submit" id="submitBtn">Generate 3D Model</button>
30
+ </form>
31
+
32
+ <div id="status"></div>
33
+ <div id="result"></div>
34
+
35
+ <script>
36
+ document.getElementById('uploadForm').addEventListener('submit', async (e) => {
37
+ e.preventDefault();
38
+
39
+ const submitBtn = document.getElementById('submitBtn');
40
+ const statusDiv = document.getElementById('status');
41
+ const resultDiv = document.getElementById('result');
42
+
43
+ submitBtn.disabled = true;
44
+ statusDiv.style.color = 'black';
45
+ statusDiv.textContent = 'Uploading and processing... This takes a few minutes on the free CPU tier. Please wait!';
46
+ resultDiv.innerHTML = '';
47
+
48
+ const formData = new FormData();
49
+ formData.append('image', document.getElementById('image').files[0]);
50
+
51
+ // ⚠️ IMPORTANT: Replace this with your actual Hugging Face Space URL!
52
+ const apiUrl = 'https://YOUR-SPACE-NAME.hf.space/generate-3d';
53
+
54
+ try {
55
+ const response = await fetch(apiUrl, {
56
+ method: 'POST',
57
+ body: formData
58
+ });
59
+
60
+ if (!response.ok) {
61
+ const errorText = await response.text();
62
+ throw new Error(`Server Error (${response.status}): ${errorText}`);
63
+ }
64
+
65
+ const blob = await response.blob();
66
+ const downloadUrl = URL.createObjectURL(blob);
67
+
68
+ statusDiv.style.color = 'green';
69
+ statusDiv.textContent = 'Success! Model generated.';
70
+
71
+ const link = document.createElement('a');
72
+ link.href = downloadUrl;
73
+ link.download = 'generated_model.obj';
74
+ link.className = 'download-btn';
75
+ link.textContent = 'Download .obj File';
76
+ resultDiv.appendChild(link);
77
+
78
+ } catch (error) {
79
+ statusDiv.style.color = 'red';
80
+ statusDiv.textContent = `Error: ${error.message}`;
81
+ } finally {
82
+ submitBtn.disabled = false;
83
+ }
84
+ });
85
+ </script>
86
+ </body>
87
+ </html>