Hugging Face's logo

Spaces:
ktongue
/
material_identification
Sleeping

App Files Community
1
Deploy Bot commited on
Commit
7ba882a
·
1 Parent(s): 807821c

Deploy SciANN Material Identification app (Django + React + Vite)

Browse files
Files changed (11) hide show
  1. .gitignore +10 -0
  2. Dockerfile +28 -0
  3. backend/backend/settings.py +41 -0
  4. backend/manage.py +11 -0
  5. frontend/index.html +12 -0
  6. frontend/package.json +19 -0
  7. frontend/src/App.css +12 -0
  8. frontend/src/App.jsx +86 -0
  9. frontend/src/main.jsx +10 -0
  10. frontend/vite.config.js +11 -0
  11. requirements.txt +9 -0
.gitignore ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ node_modules/
2
+ venv/
3
+ __pycache__/
4
+ *.pyc
5
+ .env
6
+ dist/
7
+ frontend/dist/
8
+ staticfiles/
9
+ db.sqlite3
10
+ *.log
Dockerfile ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ FROM python:3.9-slim
2
+
3
+ # Install system dependencies and Node.js
4
+ RUN apt-get update && apt-get install -y curl build-essential \
5
+ && curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
6
+ && apt-get install -y nodejs && apt-get clean && rm -rf /var/lib/apt/lists/*
7
+
8
+ WORKDIR /app
9
+
10
+ # Copy Python requirements and install
11
+ COPY requirements.txt ./
12
+ RUN pip install --no-cache-dir -r requirements.txt
13
+
14
+ # Copy project
15
+ COPY . .
16
+
17
+ # Build frontend
18
+ WORKDIR /app/frontend
19
+ RUN npm install --no-audit --prefer-offline
20
+ RUN npm run build
21
+
22
+ # Collect static files for Django (Whitenoise)
23
+ WORKDIR /app
24
+ ENV PORT=7860
25
+ EXPOSE ${PORT}
26
+ RUN python backend/manage.py collectstatic --noinput || true
27
+
28
+ CMD ["gunicorn", "backend.backend.wsgi:application", "--bind", "0.0.0.0:7860"]
backend/backend/settings.py ADDED
@@ -0,0 +1,41 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import os
2
+ from pathlib import Path
3
+
4
+ BASE_DIR = Path(__file__).resolve().parent.parent
5
+
6
+ SECRET_KEY = 'change-me-before-prod'
7
+ DEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDrk'DEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBeNoisDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDrk'DEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDEBDE]
8
+
9
+ ROOT_URLCONF = 'backend.urls'
10
+
11
+ TEMPLATES = [
12
+ {
13
+ 'BACKEND': 'django.template.backends.django.DjangoTemplates',
14
+ 'DIRS': [BASE_DIR / '..' / 'frontend' / 'dist'],
15
+ 'APP_DIRS': True,
16
+ 'OPTIONS': {
17
+ 'context_processors': [
18
+ 'django.template.context_processors.debug',
19
+ 'django.template.context_processors.request',
20
+ 'django.contrib.auth.context_processors.auth',
21
+ 'django.contrib.messages.context_processors.messages',
22
+ ],
23
+ },
24
+ },
25
+ ]
26
+
27
+ WSGI_APPLICATION = 'backend.wsgi.application'
28
+
29
+ DATABASES = {
30
+ 'default': {
31
+ 'ENGINE': 'django.db.backends.sqlite3',
32
+ 'NAME': BASE_DIR / 'db.sqlite3',
33
+ }
34
+ }
35
+
36
+ STATIC_URL = 'static/'
37
+ STATIC_ROOT = os.path.join(BASE_DIR, '..', 'staticfiles')
38
+ STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
39
+
40
+ DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
41
+ CORS_ALLOW_ALL_ORIGINS = True
backend/manage.py ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ #!/usr/bin/env python
2
+ import os
3
+ import sys
4
+
5
+ if __name__ == '__main__':
6
+ os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'backend.settings')
7
+ try:
8
+ from django.core.management import execute_from_command_line
9
+ except ImportError as exc:
10
+ raise ImportError("Couldn't import Django") from exc
11
+ execute_from_command_line(sys.argv)
frontend/index.html ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>SciANN App</title>
7
+ </head>
8
+ <body>
9
+ <div id="root"></div>
10
+ <script type="module" src="/src/main.jsx"></script>
11
+ </body>
12
+ </html>
frontend/package.json ADDED
@@ -0,0 +1,19 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "name": "sciann-frontend",
3
+ "version": "0.1.0",
4
+ "private": true,
5
+ "scripts": {
6
+ "dev": "vite",
7
+ "build": "vite build",
8
+ "preview": "vite preview --port 5173"
9
+ },
10
+ "dependencies": {
11
+ "axios": "^1.4.0",
12
+ "react": "^18.2.0",
13
+ "react-dom": "^18.2.0"
14
+ },
15
+ "devDependencies": {
16
+ "@vitejs/plugin-react": "^4.0.0",
17
+ "vite": "^5.0.0"
18
+ }
19
+ }
frontend/src/App.css ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * { box-sizing: border-box; }
2
+ body { font-family: Arial, sans-serif; background: #f3f4f6; margin: 0; padding: 20px; }
3
+ .container { max-width: 800px; margin: 0 auto; }
4
+ header { text-align: center; margin-bottom: 20px; }
5
+ .card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
6
+ .input-group { margin-bottom: 12px; }
7
+ .input-group label { display: block; font-weight: bold; margin-bottom: 6px; }
8
+ input[type="number"] { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
9
+ button { padding: 10px 14px; background: #2563eb; color: white; border: none; border-radius: 6px; cursor: pointer; }
10
+ button[disabled] { opacity: 0.6; cursor: not-allowed; }
11
+ .result { margin-top: 16px; }
12
+ .error { color: #b91c1c; }
frontend/src/App.jsx ADDED
@@ -0,0 +1,86 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { useState } from 'react'
2
+ import axios from 'axios'
3
+ import './App.css'
4
+
5
+ export default function App() {
6
+ const [param1, setParam1] = useState('')
7
+ const [param2, setParam2] = useState('')
8
+ const [result, setResult] = useState(null)
9
+ const [loading, setLoading] = useState(false)
10
+ const [error, setError] = useState('')
11
+
12
+ const handleSubmit = async (e) => {
13
+ e.preventDefault()
14
+ setLoading(true)
15
+ setError('')
16
+ setResult(null)
17
+
18
+ try {
19
+ const response = await axios.post('/api/predict/', {
20
+ param1: parseFloat(param1),
21
+ param2: parseFloat(param2)
22
+ })
23
+ setResult(response.data)
24
+ } catch (err) {
25
+ setError('Error during material identification.')
26
+ console.error(err)
27
+ } finally {
28
+ setLoading(false)
29
+ }
30
+ }
31
+
32
+ return (
33
+ <div className="container">
34
+ <header>
35
+ <h1>Material Identification: Talc</h1>
36
+ <p>Based on SciANN and Hugging Face</p>
37
+ </header>
38
+
39
+ <div className="card">
40
+ <h2>Input Parameters</h2>
41
+ <form onSubmit={handleSubmit}>
42
+ <div className="input-group">
43
+ <label>Parameter 1 (Stress):</label>
44
+ <input
45
+ type="number"
46
+ step="0.01"
47
+ value={param1}
48
+ onChange={(e) => setParam1(e.target.value)}
49
+ required
50
+ />
51
+ </div>
52
+ <div className="input-group">
53
+ <label>Parameter 2 (Strain):</label>
54
+ <input
55
+ type="number"
56
+ step="0.01"
57
+ value={param2}
58
+ onChange={(e) => setParam2(e.target.value)}
59
+ required
60
+ />
61
+ </div>
62
+ <button type="submit" disabled={loading}>
63
+ {loading ? 'Analyzing...' : 'Identify Material'}
64
+ </button>
65
+ </form>
66
+
67
+ {error && <p className="error">{error}</p>}
68
+
69
+ {result && (
70
+ <div className="result">
71
+ <h3>Result</h3>
72
+ <p><strong>Material:</strong> {result.material}</p>
73
+ <p><strong>Confidence:</strong> {(result.confidence * 100).toFixed(2)}%</p>
74
+ {result.properties && (
75
+ <div>
76
+ <h4>Predicted Properties</h4>
77
+ <p>Stress: {result.properties.stress.toFixed(4)}</p>
78
+ <p>Strain: {result.properties.strain.toFixed(4)}</p>
79
+ </div>
80
+ )}
81
+ </div>
82
+ )}
83
+ </div>
84
+ </div>
85
+ )
86
+ }
frontend/src/main.jsx ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ import React from 'react'
2
+ import { createRoot } from 'react-dom/client'
3
+ import App from './App'
4
+ import './App.css'
5
+
6
+ createRoot(document.getElementById('root')).render(
7
+ <React.StrictMode>
8
+ <App />
9
+ </React.StrictMode>
10
+ )
frontend/vite.config.js ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { defineConfig } from 'vite'
2
+ import react from '@vitejs/plugin-react'
3
+
4
+ export default defineConfig({
5
+ plugins: [react()],
6
+ base: './',
7
+ build: {
8
+ outDir: 'dist',
9
+ emptyOutDir: true,
10
+ },
11
+ })
requirements.txt ADDED
@@ -0,0 +1,9 @@
 
 
 
 
 
 
 
 
 
 
1
+ Django>=4.2
2
+ djangorestframework
3
+ django-cors-headers
4
+ whitenoise
5
+ scikit-learn
6
+ sciann
7
+ numpy
8
+ pandas
9
+ gunicorn