Spaces:

ChandraP12330
/

vinm-frontend

Sleeping

App Files Files Community

ChandraP12330 commited on Nov 30, 2025

Commit

da32222

verified ·

1 Parent(s): ef09de9

Upload 16 files

Browse files

Files changed (16) hide show

.dockerignore +5 -0
Dockerfile +26 -0
eslint.config.js +29 -0
index.html +13 -0
package-lock.json +0 -0
package.json +30 -0
public/vite.svg +1 -0
src/App.css +42 -0
src/App.jsx +61 -0
src/assets/react.svg +1 -0
src/components/ImageInput.jsx +63 -0
src/components/ResultsTable.jsx +19 -0
src/components/UrlInput.jsx +22 -0
src/index.css +234 -0
src/main.jsx +10 -0
vite.config.js +7 -0

.dockerignore ADDED Viewed

	@@ -0,0 +1,5 @@

+node_modules
+dist
+.git
+.gitignore
+README.md

Dockerfile ADDED Viewed

	@@ -0,0 +1,26 @@

+# Use an official Node runtime as a parent image
+FROM node:20-slim
+# Set the working directory in the container
+WORKDIR /app
+# Copy package.json and package-lock.json
+COPY package*.json ./
+# Install dependencies
+RUN npm ci
+# Copy the rest of the application code
+COPY . .
+# Build the app
+RUN npm run build
+# Install 'serve' to serve the static files
+RUN npm install -g serve
+# Expose port 7860 (Hugging Face Spaces default)
+EXPOSE 7860
+# Command to run the app
+CMD ["serve", "-s", "dist", "-l", "7860"]

eslint.config.js ADDED Viewed

	@@ -0,0 +1,29 @@

+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,30 @@

+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.13.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "vite": "^7.2.4"
+  }
+}

public/vite.svg ADDED Viewed

src/App.css ADDED Viewed

	@@ -0,0 +1,42 @@

+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+.card {
+  padding: 2em;
+}
+.read-the-docs {
+  color: #888;
+}

src/App.jsx ADDED Viewed

	@@ -0,0 +1,61 @@

+import React, { useState } from 'react';
+import axios from 'axios';
+import ImageInput from './components/ImageInput';
+import ResultsTable from './components/ResultsTable';
+function App() {
+  const [url, setUrl] = useState('');
+  const [result, setResult] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const handleAnalyze = async () => {
+    if (!url) return;
+    setLoading(true);
+    setError(null);
+    setResult(null);
+    try {
+      const response = await axios.post('https://chandrap12330-vinm-base64.hf.space/analyze_shelf', {
+        image_base64: url
+      });
+      setResult(response.data.markdown_output);
+    } catch (err) {
+      console.error(err);
+      setError(err.response?.data?.detail?.[0]?.msg || 'Failed to analyze image. Please check the URL and try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+  return (
+    <div className="app-container">
+      <h1>Shelf Analyzer</h1>
+      <ImageInput
+        onImageSelected={setUrl}
+        onAnalyze={handleAnalyze}
+        isLoading={loading}
+        hasResult={!!result}
+      />
+      {error && (
+        <div className="error-message">
+          {error}
+        </div>
+      )}
+      {result && (
+        <>
+          <div className="success-message">
+            <span>✅</span> Image Analysis completed successfully
+          </div>
+          <ResultsTable data={result} />
+        </>
+      )}
+    </div>
+  );
+}
+export default App;

src/assets/react.svg ADDED Viewed

src/components/ImageInput.jsx ADDED Viewed

	@@ -0,0 +1,63 @@

+import React, { useState } from 'react';
+const ImageInput = ({ onImageSelected, onAnalyze, isLoading, hasResult }) => {
+    const [preview, setPreview] = useState(null);
+    const [fileName, setFileName] = useState('');
+    const handleFileChange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+            setFileName(file.name);
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const base64String = reader.result;
+                setPreview(base64String);
+                // Extract the raw base64 string (remove "data:image/jpeg;base64," prefix)
+                const rawBase64 = base64String.split(',')[1];
+                onImageSelected(rawBase64);
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+    return (
+        <div className="card">
+            <div className="input-group" style={{ flexDirection: 'column', gap: '1rem' }}>
+                <div className="file-input-wrapper">
+                    <input
+                        type="file"
+                        accept="image/*"
+                        onChange={handleFileChange}
+                        disabled={isLoading}
+                        className="file-input"
+                        id="file-upload"
+                    />
+                    <label htmlFor="file-upload" className="file-input-label">
+                        <span>Choose File</span>
+                        {fileName || 'No file chosen'}
+                    </label>
+                </div>
+                {preview && (
+                    <div className="image-preview" style={{ textAlign: 'center' }}>
+                        <img
+                            src={preview}
+                            alt="Preview"
+                            style={{ maxWidth: '100%', maxHeight: '400px', borderRadius: '8px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}
+                        />
+                    </div>
+                )}
+                <button
+                    onClick={onAnalyze}
+                    disabled={isLoading || !preview || hasResult}
+                    style={{ width: '100%' }}
+                >
+                    {isLoading ? <div className="loading-spinner" /> : 'Analyze Shelf'}
+                </button>
+            </div>
+        </div>
+    );
+};
+export default ImageInput;

src/components/ResultsTable.jsx ADDED Viewed

	@@ -0,0 +1,19 @@

+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+const ResultsTable = ({ data }) => {
+    if (!data) return null;
+    return (
+        <div className="card">
+            <div className="table-container">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                    {data}
+                </ReactMarkdown>
+            </div>
+        </div>
+    );
+};
+export default ResultsTable;

src/components/UrlInput.jsx ADDED Viewed

	@@ -0,0 +1,22 @@

+import React from 'react';
+const UrlInput = ({ url, setUrl, onAnalyze, isLoading }) => {
+  return (
+    <div className="card">
+      <div className="input-group">
+        <input
+          type="text"
+          placeholder="Paste image URL here..."
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          disabled={isLoading}
+        />
+        <button onClick={onAnalyze} disabled={isLoading || !url.trim()}>
+          {isLoading ? <div className="loading-spinner" /> : 'Analyze Shelf'}
+        </button>
+      </div>
+    </div>
+  );
+};
+export default UrlInput;

src/index.css ADDED Viewed

	@@ -0,0 +1,234 @@

+:root {
+  --primary-color: #6366f1;
+  /* Indigo 500 */
+  --primary-hover: #4f46e5;
+  /* Indigo 600 */
+  --background-dark: #0f172a;
+  /* Slate 900 */
+  --surface-dark: #1e293b;
+  /* Slate 800 */
+  --text-primary: #f8fafc;
+  /* Slate 50 */
+  --text-secondary: #94a3b8;
+  /* Slate 400 */
+  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
+  --glass-bg: rgba(30, 41, 59, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
+}
+body {
+  margin: 0;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  background-color: var(--background-dark);
+  color: var(--text-primary);
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+}
+#root {
+  width: 100%;
+  max-width: 1280px;
+  /* Increased from 480px */
+  padding: 1rem;
+  box-sizing: border-box;
+}
+/* Typography */
+h1 {
+  font-size: 2rem;
+  font-weight: 800;
+  text-align: center;
+  margin-bottom: 2rem;
+  background: var(--accent-gradient);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  letter-spacing: -0.025em;
+}
+/* Card Container */
+.card {
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  border-radius: 1.5rem;
+  padding: 1.5rem;
+  box-shadow: var(--shadow-lg);
+  margin-bottom: 1.5rem;
+}
+/* Input Group */
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+input[type="text"] {
+  width: 100%;
+  padding: 1rem;
+  border-radius: 1rem;
+  border: 1px solid var(--glass-border);
+  background: rgba(15, 23, 42, 0.6);
+  color: white;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+input[type="text"]:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
+}
+/* Modern File Input */
+.file-input-wrapper {
+  position: relative;
+  width: 100%;
+  height: 3rem;
+  border: 1px dashed var(--glass-border);
+  border-radius: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(15, 23, 42, 0.3);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  overflow: hidden;
+}
+.file-input-wrapper:hover {
+  border-color: var(--primary-color);
+  background: rgba(15, 23, 42, 0.5);
+}
+.file-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+.file-input-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  pointer-events: none;
+}
+.file-input-label span {
+  color: var(--primary-color);
+  font-weight: 600;
+}
+/* Button */
+button {
+  width: 100%;
+  padding: 1rem;
+  border-radius: 1rem;
+  border: none;
+  background: var(--accent-gradient);
+  color: white;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+}
+button:active {
+  transform: scale(0.98);
+}
+button:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  filter: grayscale(0.5);
+}
+/* Table Styles */
+.table-container {
+  overflow-x: auto;
+  border-radius: 1rem;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+th,
+td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--glass-border);
+}
+th {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-secondary);
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+}
+tr:last-child td {
+  border-bottom: none;
+}
+/* Loading Animation */
+.loading-spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: white;
+  animation: spin 1s ease-in-out infinite;
+  margin: 0 auto;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* Error Message */
+.error-message {
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  color: #fca5a5;
+  padding: 1rem;
+  border-radius: 1rem;
+  text-align: center;
+  margin-top: 1rem;
+  font-size: 0.9rem;
+}
+/* Success Message */
+.success-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  background: rgba(34, 197, 94, 0.1);
+  border: 1px solid rgba(34, 197, 94, 0.2);
+  color: #4ade80;
+  padding: 1rem;
+  border-radius: 1rem;
+  text-align: center;
+  margin-bottom: 1.5rem;
+  font-weight: 500;
+}

src/main.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

vite.config.js ADDED Viewed

	@@ -0,0 +1,7 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})