diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..20f80f9
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,27 @@
+// import React from 'react';
+//
+// import LoginPage from './pages/user/login.js';
+// import LandingPage from './pages/Landing.js';
+//
+// const IndexPage = () => {
+// return (
+//
+// )
+// }
+//
+//
+// export default IndexPage
+
+// src/index.js
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+
+
+
+);
+
diff --git a/src/pages/FormAi.js b/src/pages/FormAi.js
new file mode 100644
index 0000000..2e31865
--- /dev/null
+++ b/src/pages/FormAi.js
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import { getAiTasks, createAiTask, updateAiTask, deleteAiTask } from '../services/task.service';
+
+function FormAi() {
+ const [tasks, setTasks] = useState([]);
+
+ const fetchTasks = async () => {
+ try {
+ const data = await getAiTasks();
+ setTasks(data || []);
+ } catch (err) {
+ console.error(err);
+ alert('Failed to load AI tasks');
+ }
+ };
+
+ useEffect(() => {
+ fetchTasks();
+ }, []);
+
+ const handleCreate = async () => {
+ const userId = 123; // Example user ID
+ try {
+ await createAiTask(userId);
+ alert('AI task created');
+ fetchTasks();
+ } catch (err) {
+ console.error(err);
+ alert('Failed to create AI task');
+ }
+ };
+
+ const handleStop = async (taskId) => {
+ try {
+ await updateAiTask(taskId, 'stop');
+ fetchTasks();
+ } catch (err) {
+ console.error(err);
+ alert('Failed to stop AI task');
+ }
+ };
+
+ const handleDelete = async (taskId) => {
+ try {
+ await deleteAiTask(taskId);
+ fetchTasks();
+ } catch (err) {
+ console.error(err);
+ alert('Failed to delete AI task');
+ }
+ };
+
+ return (
+
+
AI Tasks
+
+
+ {tasks.map((t) => (
+ -
+ Task ID: {t._id}, Status: {t.status}
+
+
+
+ ))}
+
+
+ );
+}
+
+export default FormAi;
diff --git a/src/pages/FormLogin.js b/src/pages/FormLogin.js
new file mode 100644
index 0000000..6fe5d02
--- /dev/null
+++ b/src/pages/FormLogin.js
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import authService from '../services/auth.service';
+import { useNavigate } from 'react-router-dom';
+
+function FormLogin() {
+ const navigate = useNavigate();
+ const [username, setUsername] = useState('');
+ const [password, setPassword] = useState('');
+
+ const handleLogin = async (e) => {
+ e.preventDefault();
+ try {
+ await authService.login(username, password);
+ alert('Login successful!');
+ navigate('/models');
+ } catch (err) {
+ alert('Login failed');
+ console.error(err);
+ }
+ };
+
+ return (
+
+ );
+}
+
+export default FormLogin;
diff --git a/src/pages/FormModels.js b/src/pages/FormModels.js
new file mode 100644
index 0000000..de79800
--- /dev/null
+++ b/src/pages/FormModels.js
@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { getModels, createModel, deleteModel } from '../services/model.service';
+
+function FormModels() {
+ const [models, setModels] = useState([]);
+ const [modelName, setModelName] = useState('');
+ const [file, setFile] = useState(null);
+
+ const fetchModels = async () => {
+ try {
+ const data = await getModels();
+ setModels(data.items || []);
+ } catch (error) {
+ console.error(error);
+ alert('Failed to load models');
+ }
+ };
+
+ useEffect(() => {
+ fetchModels();
+ }, []);
+
+ const handleCreateModel = async (e) => {
+ e.preventDefault();
+ if (!modelName || !file) {
+ alert('Please provide name and file');
+ return;
+ }
+
+ try {
+ await createModel(modelName, file);
+ setModelName('');
+ setFile(null);
+ alert('Model created successfully');
+ fetchModels();
+ } catch (err) {
+ console.error(err);
+ alert('Failed to create model');
+ }
+ };
+
+ const handleDelete = async (id) => {
+ if (!window.confirm('Are you sure?')) return;
+ try {
+ await deleteModel(id);
+ fetchModels();
+ } catch (error) {
+ console.error(error);
+ alert('Error deleting model');
+ }
+ };
+
+ return (
+
+
Models
+
+
+
+ {models.map((m) => (
+ -
+ {m.name} (ID: {m.id}){' '}
+
+
+ ))}
+
+
+ );
+}
+
+export default FormModels;
diff --git a/src/pages/FormRegister.js b/src/pages/FormRegister.js
new file mode 100644
index 0000000..942742f
--- /dev/null
+++ b/src/pages/FormRegister.js
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import authService from '../services/auth.service';
+import { useNavigate } from 'react-router-dom';
+
+function FormRegister() {
+ const navigate = useNavigate();
+ const [username, setUsername] = useState('');
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+
+ const handleRegister = async (e) => {
+ e.preventDefault();
+ try {
+ await authService.register(username, password, email);
+ alert('Registration successful!');
+ navigate('/login');
+ } catch (err) {
+ alert('Registration failed');
+ console.error(err);
+ }
+ };
+
+ return (
+
+ );
+}
+
+export default FormRegister;
diff --git a/src/pages/FormRenders.js b/src/pages/FormRenders.js
new file mode 100644
index 0000000..4b2ff54
--- /dev/null
+++ b/src/pages/FormRenders.js
@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import api from '../services/api'; // or a dedicated function
+
+function FormRenders() {
+ const [renders, setRenders] = useState([]);
+
+ const fetchRenders = async () => {
+ try {
+ // GET /renders? (Your backend might differ.)
+ // Must handle pagination if needed
+ const res = await api.get('/renders', { params: { page: 1, limit: 10 } });
+ setRenders(res.data.items || []);
+ } catch (error) {
+ console.error(error);
+ alert('Failed to load renders');
+ }
+ };
+
+ useEffect(() => {
+ fetchRenders();
+ }, []);
+
+ const handleDownload = (s3Key) => {
+ // If the backend returns a direct S3 link, just open it:
+ // window.open(downloadUrl, '_blank');
+
+ // Otherwise, if you only have s3Key, you might need to build the S3 URL or call a backend endpoint that redirects.
+ const s3Url = `https://YOUR_BUCKET.s3.amazonaws.com/${s3Key}`;
+ window.open(s3Url, '_blank');
+ };
+
+ return (
+
+
Renders
+ {renders.map((r) => (
+
+ {r.name} (ID: {r.id})
+ {r.s3Key && (
+
+ )}
+
+ ))}
+
+ );
+}
+
+export default FormRenders;
diff --git a/src/pages/landing.js b/src/pages/Landing.js
similarity index 100%
rename from src/pages/landing.js
rename to src/pages/Landing.js
diff --git a/src/pages/index.js b/src/pages/index.js
deleted file mode 100644
index 0f70e40..0000000
--- a/src/pages/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-import LoginPage from './user/login.js';
-import LandingPage from './landing.js';
-
-const IndexPage = () => {
- return (
-
- )
-}
-
-
-export default IndexPage
diff --git a/src/pages/user/login.js b/src/pages/user/login.js
index 8099f8b..ba3c8b8 100644
--- a/src/pages/user/login.js
+++ b/src/pages/user/login.js
@@ -4,19 +4,27 @@ import '../../styles/general.scss';
import LargeCubeComponent from '../../components/largeCube.js';
import UserLoginForm from '../../components/forms/user_auth/userLogin.js';
-
+import FootComponent from '../../components/foot.js';
+import NavBarComponent from '../../components/navbar.js';
const LoginPage = () => {
return (
-
-
+ <>
+
+
+
+
)
}
diff --git a/src/services/api.js b/src/services/api.js
new file mode 100644
index 0000000..7ad0679
--- /dev/null
+++ b/src/services/api.js
@@ -0,0 +1,23 @@
+// src/services/api.js
+import axios from 'axios';
+import { getCookie } from './cookie';
+
+const api = axios.create({
+ baseURL: 'http://0.0.0.0:9090',
+ withCredentials: true,
+});
+
+api.interceptors.request.use(
+ (config) => {
+ const token = getCookie('access_token');
+ if (token) {
+ config.headers.Authorization = `Bearer ${token}`;
+ }
+ return config;
+ },
+ (error) => {
+ return Promise.reject(error);
+ }
+);
+
+export default api;
diff --git a/src/services/auth.service.js b/src/services/auth.service.js
new file mode 100644
index 0000000..28de745
--- /dev/null
+++ b/src/services/auth.service.js
@@ -0,0 +1,35 @@
+// src/services/auth.service.js
+import api from './api';
+import { setCookie, eraseCookie } from './cookie';
+
+class AuthService {
+ async login(username, password) {
+ // The FastAPI /auth endpoint expects form data: username, password
+ const formData = new FormData();
+ formData.append('username', username);
+ formData.append('password', password);
+
+ const response = await api.post('/auth', formData);
+ const { access_token } = response.data;
+ // Save to cookie
+ setCookie('access_token', access_token, 1); // 1 day (adjust as needed)
+ return response.data;
+ }
+
+ async register(username, password, email) {
+ const payload = { username, password, email };
+ return api.post('/register/', payload);
+ }
+
+ logout() {
+ // Remove token cookie
+ eraseCookie('access_token');
+ }
+
+ // Optionally, you can provide a check to see if cookie is present
+ isLoggedIn() {
+ return !!document.cookie.includes('access_token=');
+ }
+}
+
+export default new AuthService();
diff --git a/src/services/cookie.js b/src/services/cookie.js
new file mode 100644
index 0000000..6ad2934
--- /dev/null
+++ b/src/services/cookie.js
@@ -0,0 +1,24 @@
+export function setCookie(name, value, days = 1) {
+ const date = new Date();
+ date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+ const expires = 'expires=' + date.toUTCString();
+ document.cookie = `${name}=${value};${expires};path=/;SameSite=Lax`;
+ }
+
+ export function getCookie(name) {
+ const nameEQ = name + '=';
+ const ca = document.cookie.split(';');
+ for (let i = 0; i < ca.length; i++) {
+ let c = ca[i];
+ while (c.charAt(0) === ' ') c = c.substring(1);
+ if (c.indexOf(nameEQ) === 0) {
+ return c.substring(nameEQ.length, c.length);
+ }
+ }
+ return null;
+ }
+
+ export function eraseCookie(name) {
+ document.cookie = name + '=; Max-Age=-99999999;path=/;';
+ }
+
\ No newline at end of file
diff --git a/src/services/model.service.js b/src/services/model.service.js
new file mode 100644
index 0000000..9f347cf
--- /dev/null
+++ b/src/services/model.service.js
@@ -0,0 +1,72 @@
+// src/services/model.service.js
+import api from './api';
+
+/**
+ * Fetch a paginated list of models
+ */
+export async function getModels(page = 1, limit = 10) {
+ const res = await api.get('/models', { params: { page, limit } });
+ return res.data;
+}
+
+/**
+ * Create a new model:
+ * 1) Request a presigned URL from backend
+ * 2) PUT the file to S3
+ * 3) POST the model data with s3Key to backend
+ */
+export async function createModel(name, file) {
+ // get presigned URL from your backend
+ const presignRes = await api.post('/models/upload_url', { fileName: file.name });
+ const { url, key } = presignRes.data; // e.g. { url, key }
+
+ // upload file to S3
+ await fetch(url, {
+ method: 'PUT',
+ headers: { 'Content-Type': file.type },
+ body: file,
+ });
+
+ // call actual model creation
+ const createRes = await api.post('/models', {
+ name,
+ s3Key: key,
+ });
+ return createRes.data;
+}
+
+/**
+ * Update an existing model (similar approach)
+ */
+export async function updateModel(modelId, newName, newFile) {
+ let s3Key;
+ if (newFile) {
+ // 1) get presigned URL
+ const presignRes = await api.post('/models/upload_url', { fileName: newFile.name });
+ const { url, key } = presignRes.data;
+
+ // 2) PUT file to S3
+ await fetch(url, {
+ method: 'PUT',
+ headers: { 'Content-Type': newFile.type },
+ body: newFile,
+ });
+ s3Key = key;
+ }
+
+ // 3) call PUT /models/{id} with updated fields
+ const payload = {};
+ if (newName) payload.name = newName;
+ if (s3Key) payload.s3Key = s3Key;
+
+ const updateRes = await api.put(`/models/${modelId}`, payload);
+ return updateRes.data;
+}
+
+/**
+ * Delete model
+ */
+export async function deleteModel(modelId) {
+ const res = await api.delete(`/models/${modelId}`);
+ return res.data;
+}
diff --git a/src/services/task.service.js b/src/services/task.service.js
new file mode 100644
index 0000000..2f00b2d
--- /dev/null
+++ b/src/services/task.service.js
@@ -0,0 +1,82 @@
+// src/services/task.service.js
+import api from './api';
+
+/**
+ * RENDER tasks
+ */
+// Return a list of tasks from the backend
+export async function getRenderTasks(status, page = 1, limit = 10) {
+ const params = { page, limit };
+ if (status) params.status = status;
+
+ const res = await api.get('/renders/tasks', { params });
+ return res.data;
+}
+
+/**
+ * Create a render task (Photo or Video).
+ * The backend expects either `photo: {...}` or `video: {...}` in the request body
+ */
+export async function createRenderTaskPhoto(userId, modelId, renderName) {
+ const body = {
+ photo: { USER_ID: userId, MODEL_ID: modelId, RENDER_NAME: renderName },
+ };
+ const res = await api.post('/renders/tasks', body);
+ return res.data;
+}
+
+export async function createRenderTaskVideo(userId, modelId, renderName, frameStart, frameEnd) {
+ const body = {
+ video: {
+ USER_ID: userId,
+ MODEL_ID: modelId,
+ RENDER_NAME: renderName,
+ FRAME_START: frameStart,
+ FRAME_END: frameEnd,
+ },
+ };
+ const res = await api.post('/renders/tasks', body);
+ return res.data;
+}
+
+// Stop or resume a render task
+export async function updateRenderTask(taskId, action) {
+ const res = await api.put(`/renders/tasks/${taskId}`, { action });
+ return res.data;
+}
+
+// Delete (stop) a render task
+export async function deleteRenderTask(taskId) {
+ const res = await api.delete(`/renders/tasks/${taskId}`);
+ return res.data;
+}
+
+/**
+ * AI tasks
+ */
+export async function getAiTasks(status, page = 1, limit = 10) {
+ const params = { page, limit };
+ if (status) params.status = status;
+
+ const res = await api.get('/ai/tasks', { params });
+ return res.data;
+}
+
+export async function createAiTask(userId) {
+ // The backend expects { ai_model: { USER_ID: ... } }
+ const body = {
+ ai_model: { USER_ID: userId },
+ };
+ const res = await api.post('/ai/tasks', body);
+ return res.data;
+}
+
+export async function updateAiTask(taskId, action) {
+ const res = await api.put(`/ai/tasks/${taskId}`, { action });
+ return res.data;
+}
+
+export async function deleteAiTask(taskId) {
+ const res = await api.delete(`/ai/tasks/${taskId}`);
+ return res.data;
+}
diff --git a/src/styles/general.scss b/src/styles/general.scss
index 1a6f54a..d1f3521 100644
--- a/src/styles/general.scss
+++ b/src/styles/general.scss
@@ -130,7 +130,9 @@ body, html {
}
.main-content {
- margin-top: 0%;
+ padding-top: 15%;
+ padding-bottom: 12%;
+ width: 50%;
align-items: center;
justify-content: space-evenly;
}
@@ -153,7 +155,6 @@ body, html {
// border: 2px solid $border-color;
border-radius: 10px;
- margin-top: -400px;
margin-right: auto;
margin-left: auto;
diff --git a/src/styles/large.cube.scss b/src/styles/large.cube.scss
index fba205a..2ef4be1 100644
--- a/src/styles/large.cube.scss
+++ b/src/styles/large.cube.scss
@@ -1,9 +1,9 @@
-$cube-size: 400px;
+$cube-size: 350px;
$cube-color: rgba(0, 140, 0, 0.5);
-$perspective: 10000px;
+$perspective: 100000px;
$animation-duration: 20s;
-@mixin cube-face {
+@mixin large-cube-face {
position: absolute;
width: $cube-size - 15px;
height: $cube-size - 15px;
@@ -11,7 +11,7 @@ $animation-duration: 20s;
will-change: transform;
}
-@keyframes rotateCube {
+@keyframes rotateLargeCube {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
@@ -20,24 +20,26 @@ $animation-duration: 20s;
}
}
-.graphic-container {
- perspective: $perspective;
- perspective-origin: 50% 100px; // Adjusted for better 3D effect
- z-index: 1; // Lower z-index than the login form to place it behind
+.large-graphic-container {
+ width: 100%;
+ margin-top: 0%;
+ //perspective: $perspective;
+ //perspective-origin: 50% 100px; // Adjusted for better 3D effect
+ //z-index: 1; // Lower z-index than the login form to place it behind
}
-.cube {
+.large-cube {
width: $cube-size;
height: $cube-size;
- position: relative;
+ //position: relative;
margin: auto; // Centers the cube within the graphic container
transform-style: preserve-3d;
transform-origin: center center; // Rotates around the center of the cube
- animation: rotateCube $animation-duration infinite linear;
+ animation: rotateLargeCube $animation-duration infinite linear;
will-change: transform;
div {
- @include cube-face;
+ @include large-cube-face;
}
.front { transform: translateZ($cube-size / 2); }