Hugging Face's logo

Spaces:
ktongue
/
material_identification
Sleeping

App Files Community
1
Deploy Bot commited on
Commit
1fe3cba
·
1 Parent(s): d16d7e5

Inline HTML directly in view - eliminates file loading issues

Browse files
Files changed (1) hide show
  1. backend/core/views.py +105 -9
backend/core/views.py CHANGED
@@ -2,7 +2,109 @@ from django.http import JsonResponse, HttpResponse
2
  from django.views.decorators.http import require_http_methods
3
  from rest_framework.decorators import api_view
4
  from . import model_loader
5
- import os
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
 
7
  @api_view(['POST'])
8
  def predict_material(request):
@@ -58,11 +160,5 @@ def predict_material(request):
58
 
59
  @require_http_methods(['GET'])
60
  def serve_react_app(request):
61
- """Serve frontend HTML"""
62
- template_path = os.path.join(os.path.dirname(__file__), '..', 'templates', 'index.html')
63
- try:
64
- with open(template_path, 'r', encoding='utf-8') as f:
65
- html = f.read()
66
- return HttpResponse(html, content_type='text/html; charset=utf-8')
67
- except FileNotFoundError:
68
- return HttpResponse('<h1>Frontend not found</h1><p>Check /app/backend/templates/index.html</p>', status=404)
 
2
  from django.views.decorators.http import require_http_methods
3
  from rest_framework.decorators import api_view
4
  from . import model_loader
5
+
6
+ HTML_CONTENT = """<!DOCTYPE html>
7
+ <html lang="en">
8
+ <head>
9
+ <meta charset="UTF-8">
10
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
+ <title>Material Identification: Talc</title>
12
+ <style>
13
+ * { margin: 0; padding: 0; box-sizing: border-box; }
14
+ body { font-family: Arial, sans-serif; background: #f0f2f5; padding: 20px; }
15
+ .container { max-width: 600px; margin: 50px auto; }
16
+ h1 { color: #333; text-align: center; margin-bottom: 10px; font-size: 32px; }
17
+ .subtitle { text-align: center; color: #666; margin-bottom: 30px; }
18
+ .card { background: white; border-radius: 8px; padding: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
19
+ h2 { color: #333; font-size: 20px; margin-bottom: 20px; }
20
+ .form-group { margin-bottom: 15px; }
21
+ label { display: block; color: #333; font-weight: bold; margin-bottom: 5px; }
22
+ input { width: 100%; padding: 10px; border: 2px solid #ddd; border-radius: 4px; font-size: 16px; }
23
+ input:focus { outline: none; border-color: #007bff; }
24
+ button { width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; font-weight: bold; margin-top: 10px; }
25
+ button:hover { background: #0056b3; }
26
+ button:disabled { background: #ccc; cursor: not-allowed; }
27
+ .loading { text-align: center; color: #666; margin-top: 20px; display: none; }
28
+ .error { color: #dc3545; padding: 12px; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; margin-top: 20px; display: none; }
29
+ .success { color: #155724; padding: 12px; background: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; margin-top: 20px; display: none; }
30
+ .result { margin-top: 20px; padding: 15px; background: #e7f3ff; border-left: 4px solid #007bff; border-radius: 4px; display: none; }
31
+ .result h3 { color: #0056b3; margin-bottom: 10px; }
32
+ .result-row { margin: 8px 0; font-size: 16px; }
33
+ .result-label { font-weight: bold; color: #333; }
34
+ .result-value { color: #555; }
35
+ </style>
36
+ </head>
37
+ <body>
38
+ <div class="container">
39
+ <h1>Material Identification</h1>
40
+ <p class="subtitle">Based on SciANN and Hugging Face Spaces</p>
41
+
42
+ <div class="card">
43
+ <h2>Talc Prediction Model</h2>
44
+ <form id="form">
45
+ <div class="form-group">
46
+ <label for="p1">Parameter 1 (Input value)</label>
47
+ <input type="number" id="p1" placeholder="e.g. 100" step="0.1" required>
48
+ </div>
49
+ <div class="form-group">
50
+ <label for="p2">Parameter 2 (Input value)</label>
51
+ <input type="number" id="p2" placeholder="e.g. 50" step="0.1" required>
52
+ </div>
53
+ <button type="submit">Predict Material</button>
54
+ </form>
55
+
56
+ <div class="loading" id="loading">Processing... Please wait</div>
57
+ <div class="error" id="error"></div>
58
+
59
+ <div class="result" id="result">
60
+ <h3>Prediction Result</h3>
61
+ <div class="result-row"><span class="result-label">Material:</span> <span class="result-value" id="rMat">-</span></div>
62
+ <div class="result-row"><span class="result-label">Confidence:</span> <span class="result-value" id="rConf">-</span></div>
63
+ <div class="result-row"><span class="result-label">Stress:</span> <span class="result-value" id="rStr">-</span></div>
64
+ <div class="result-row"><span class="result-label">Strain:</span> <span class="result-value" id="rStrain">-</span></div>
65
+ </div>
66
+ </div>
67
+ </div>
68
+
69
+ <script>
70
+ document.getElementById('form').addEventListener('submit', async function(e) {
71
+ e.preventDefault();
72
+ const p1 = document.getElementById('p1').value;
73
+ const p2 = document.getElementById('p2').value;
74
+
75
+ document.getElementById('loading').style.display = 'block';
76
+ document.getElementById('error').style.display = 'none';
77
+ document.getElementById('result').style.display = 'none';
78
+ document.querySelector('button').disabled = true;
79
+
80
+ try {
81
+ const res = await fetch('/api/predict/', {
82
+ method: 'POST',
83
+ headers: { 'Content-Type': 'application/json' },
84
+ body: JSON.stringify({ param1: parseFloat(p1), param2: parseFloat(p2) })
85
+ });
86
+
87
+ if (!res.ok) throw new Error('Request failed');
88
+ const data = await res.json();
89
+
90
+ document.getElementById('rMat').textContent = data.material || 'Unknown';
91
+ document.getElementById('rConf').textContent = (data.confidence * 100).toFixed(1) + '%';
92
+ document.getElementById('rStr').textContent = (data.properties?.stress || 0).toFixed(3);
93
+ document.getElementById('rStrain').textContent = (data.properties?.strain || 0).toFixed(3);
94
+ document.getElementById('result').style.display = 'block';
95
+ }
96
+ catch(err) {
97
+ document.getElementById('error').textContent = 'Error: ' + err.message;
98
+ document.getElementById('error').style.display = 'block';
99
+ }
100
+ finally {
101
+ document.getElementById('loading').style.display = 'none';
102
+ document.querySelector('button').disabled = false;
103
+ }
104
+ });
105
+ </script>
106
+ </body>
107
+ </html>"""
108
 
109
  @api_view(['POST'])
110
  def predict_material(request):
 
160
 
161
  @require_http_methods(['GET'])
162
  def serve_react_app(request):
163
+ """Serve frontend HTML - inline content"""
164
+ return HttpResponse(HTML_CONTENT, content_type='text/html; charset=utf-8')