Deploy MVP App

.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+.next
+.git
+.env
+.DS_Store

.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,4 @@
+.next
+node_modules
+.env
+.DS_Store

Dockerfile

@@ -0,0 +1,45 @@
+# Base image
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Copy package.json and install
+COPY package.json ./
+RUN npm install
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Build Next.js
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 7860
+ENV PORT 7860
+
+# Next.js standalone server
+CMD ["node", "server.js"]

README.md

@@ -1,10 +0,0 @@
----
-title: Annotation Mvp
-emoji: 🌖
-colorFrom: pink
-colorTo: indigo
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app/globals.css

@@ -0,0 +1,121 @@
+:root {
+  --bg-color: #0f172a;
+  --text-color: #f1f5f9;
+  --pane-bg: #1e293b;
+  --accent: #3b82f6;
+  --accent-hover: #2563eb;
+  --border-color: #334155;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+h2, h3, h4 {
+  margin-top: 0;
+  color: #f8fafc;
+}
+
+.container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.pane {
+  flex: 1;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+}
+
+.left-pane {
+  border-right: 1px solid var(--border-color);
+  background-color: #020617;
+}
+
+.pdf-frame {
+  flex-grow: 1;
+  width: 100%;
+  border: none;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+.right-pane {
+  background-color: var(--pane-bg);
+  overflow-y: auto;
+}
+
+.markdown-content {
+  background-color: #2dd4bf10;
+  padding: 24px;
+  border-radius: 12px;
+  margin-bottom: 24px;
+  line-height: 1.6;
+  border: 1px solid #2dd4bf30;
+  font-size: 1.05rem;
+}
+
+.markdown-content hr {
+  border: 0;
+  height: 1px;
+  background: var(--border-color);
+  margin: 20px 0;
+}
+
+.btn {
+  background-color: var(--accent);
+  color: #ffffff;
+  border: none;
+  padding: 12px 20px;
+  font-size: 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+}
+
+.btn:hover {
+  background-color: var(--accent-hover);
+  transform: translateY(-1px);
+}
+
+.btn:active {
+  transform: translateY(0);
+}
+
+.annotations-list {
+  margin-top: 32px;
+}
+
+.annotations-list ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.annotations-list li {
+  background-color: #33415550;
+  padding: 16px;
+  margin-bottom: 12px;
+  border-radius: 8px;
+  border-left: 4px solid #2dd4bf;
+  backdrop-filter: blur(4px);
+}
+
+.annotations-list small {
+  color: #94a3b8;
+  display: block;
+  margin-top: 8px;
+  font-size: 0.8rem;
+}

app/layout.js

@@ -0,0 +1,14 @@
+import './globals.css';
+
+export const metadata = {
+    title: 'Hugging Face Spaces Annotation App',
+    description: 'Minimal MVP for annotation',
+};
+
+export default function RootLayout({ children }) {
+    return (
+        <html lang="en">
+            <body>{children}</body>
+        </html>
+    );
+}

app/page.js

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from 'react';
+
+export default function Home() {
+    const [annotations, setAnnotations] = useState([]);
+
+    const handleAnnotate = () => {
+        const selection = window.getSelection();
+        if (selection && selection.toString().trim() !== "") {
+            const selectedText = selection.toString();
+            const note = window.prompt("Enter annotation note for: " + selectedText);
+            const newAnnotation = {
+                text: selectedText,
+                note: note || "No note provided",
+                timestamp: new Date().toISOString()
+            };
+            setAnnotations(prev => [...prev, newAnnotation]);
+            window.alert("Annotation saved locally! (Simulation)");
+        } else {
+            window.alert("Please select some text to annotate.");
+        }
+    };
+
+    return (
+        <div className="container">
+            <div className="pane left-pane">
+                <h2>PDF Viewer</h2>
+                <iframe
+                    src="https://docs.google.com/viewer?url=https://documents1.worldbank.org/curated/en/776741468181503442/pdf/The-local-socioeconomic-effects-of-gold-mining-evidence-from-Ghana.pdf&embedded=true"
+                    className="pdf-frame"
+                    title="Worldbank PDF"
+                />
+            </div>
+            <div className="pane right-pane">
+                <h2>Markdown Annotation Mvp</h2>
+                <div className="markdown-content">
+                    <h3>Sample Markdown Data</h3>
+                    <p>
+                        Gold mining in Ghana has significant effects on the local socioeconomic environment.
+                        This case study analyzes those effects comprehensively.
+                    </p>
+                    <p>
+                        You can highlight any text here and click the "Annotate Selection" button below.
+                    </p>
+                    <hr />
+                    <h4>More Context</h4>
+                    <p>
+                        We are simulating a list of Markdown formatted texts. Here, annotators could select specific phrases, such as "significant effects", and annotate them with detailed explanations or tags.
+                    </p>
+                </div>
+                <button onClick={handleAnnotate} className="btn">Annotate Selection</button>
+
+                <div className="annotations-list">
+                    {annotations.length > 0 && <h3>Current Annotations (Session only)</h3>}
+                    <ul>
+                        {annotations.map((ann, idx) => (
+                            <li key={idx}>
+                                <strong>Selected:</strong> "{ann.text}" <br />
+                                <strong>Note:</strong> {ann.note} <br />
+                                <small>{new Date(ann.timestamp).toLocaleString()}</small>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+}

next.config.mjs

@@ -0,0 +1,5 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+};
+export default nextConfig;

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "hf-spaces-annotation-app",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "14.2.14",
+    "react": "^18",
+    "react-dom": "^18"
+  }
+}