add new next.js frontend directory (#1)

* chore: frontend files added * chore: .gitignore updated * chore: files updated * chore: for eslint
nuffin · Oct 14, 2024 · 685221c · 685221c
1 parent b0b11a9
commit 685221c
Show file tree

Hide file tree

Showing 31 changed files with 16,326 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -161,4 +161,7 @@ cython_debug/
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
 #.idea/
 
+# for pyenv
+.python-version
+
 uploads/
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -0,0 +1,19 @@
+// app/layout.tsx
+import './globals.css';
+import { ReactNode } from 'react';
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <header>
+          <h1>My App</h1>
+        </header>
+        <main>{children}</main>
+        <footer>
+          <p>© 2024 My App</p>
+        </footer>
+      </body>
+    </html>
+  );
+}
diff --git a/frontend/app/page.less b/frontend/app/page.less
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -0,0 +1,142 @@
+import React, { useState, ChangeEvent, FormEvent, DragEvent } from 'react'
+import './page.less'
+import axios from 'axios'
+
+interface Result {
+  type: 'text' | 'image' | 'audio' | 'video'
+  content?: string
+  name?: string
+  url?: string
+}
+
+function App() {
+  const [file, setFile] = useState<File | null>(null)
+  const [query, setQuery] = useState<string>('')
+  const [results, setResults] = useState<Result[]>([])
+  const [showUploadDialog, setShowUploadDialog] = useState<boolean>(false)
+
+  const handleFileUpload = (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files[0]) {
+      setFile(event.target.files[0])
+    }
+    setShowUploadDialog(false)
+  }
+
+  const handleQuerySubmit = async (event: FormEvent) => {
+    event.preventDefault()
+    try {
+      const response = await axios.post<{ results: Result[] }>('/api/search', {
+        query,
+      })
+      setResults(response.data.results)
+    } catch (error) {
+      console.error('Error fetching results:', error)
+    }
+  }
+
+  const handleFileDrop = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    if (event.dataTransfer.files && event.dataTransfer.files[0]) {
+      setFile(event.dataTransfer.files[0])
+    }
+    setShowUploadDialog(false)
+  }
+
+  const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+  }
+
+  return (
+    <div className="container">
+      <h1>File Uploader and Search Query</h1>
+
+      {/* Part 1: File Upload Button */}
+      <div className="file-upload">
+        <button onClick={() => setShowUploadDialog(true)}>Upload File</button>
+
+        {showUploadDialog && (
+          <div className="upload-dialog">
+            <div
+              className="upload-area"
+              onDrop={handleFileDrop}
+              onDragOver={handleDragOver}
+            >
+              <p>Drag and drop a file here, or</p>
+              <input type="file" onChange={handleFileUpload} />
+              <button
+                onClick={() =>
+                  document
+                    .querySelector<HTMLInputElement>('input[type="file"]')
+                    ?.click()
+                }
+              >
+                Select
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Part 2: Query Text Area */}
+      <div className="query-area">
+        <form onSubmit={handleQuerySubmit}>
+          <textarea
+            rows={5}
+            placeholder="Enter your query here..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          ></textarea>
+          <button type="submit">Submit Query</button>
+        </form>
+      </div>
+
+      {/* Part 3: Results Area */}
+      <div className="results-area">
+        <h2>Results:</h2>
+        {results.length > 0 ? (
+          <ul>
+            {results.map((result, index) => (
+              <li key={index}>
+                {result.type === 'text' && <p>{result.content}</p>}
+                {result.type === 'image' && (
+                  <div>
+                    <p>{result.name}</p>
+                    <a href={result.url} download>
+                      <img src={result.url} alt="Downloaded" />
+                    </a>
+                  </div>
+                )}
+                {result.type === 'audio' && (
+                  <div>
+                    <p>{result.name}</p>
+                    <a href={result.url} download>
+                      <audio controls>
+                        <source src={result.url} type="audio/mpeg" />
+                        Your browser does not support the audio element.
+                      </audio>
+                    </a>
+                  </div>
+                )}
+                {result.type === 'video' && (
+                  <div>
+                    <p>{result.name}</p>
+                    <a href={result.url} download>
+                      <video width="320" height="240" controls>
+                        <source src={result.url} type="video/mp4" />
+                        Your browser does not support the video tag.
+                      </video>
+                    </a>
+                  </div>
+                )}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p>No results to display.</p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default App
diff --git a/frontend/index.js b/frontend/index.js
diff --git a/frontend/package.json b/frontend/package.json
@@ -0,0 +1,79 @@
+{
+  "name": "semantic-search-frontend",
+  "version": "1.0.0",
+  "main": "index.js",
+  "engines": {
+    "node": ">=20.18.0"
+  },
+  "scripts": {
+    "build": "cross-env NODE_OPTIONS=\"--max-old-space-size=12288\" next build",
+    "dev": "next dev",
+    "ts:check": "tsc --noEmit",
+    "lint": "prettier --check . && cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" next lint --quiet",
+    "start": "next start",
+    "prettier": "prettier --write --cache .",
+    "prettier-diff": "git diff --name-only | grep '^clients/web/' | sed 's|^clients/web/||' | xargs prettier --write",
+    "test": "cypress run --headless --browser chrome",
+    "test:unit": "vitest",
+    "test:bench": "vitest bench",
+    "record-test": "cypress run --headless --browser chrome --record --key",
+    "analyze": "cross-env ANALYZE=true next build",
+    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
+    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@types/react": "^18.3.11",
+    "axios": "^1.7.7",
+    "dayjs": "^1.11.13",
+    "next": "^14.2.15",
+    "next-auth": "^4.24.8",
+    "nextjs-progressbar": "^0.0.16",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-dropzone": "^14.2.9",
+    "react-markdown": "^9.0.1",
+    "react-player": "^2.16.0",
+    "react-select": "^5.8.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-textarea-autosize": "^8.5.4"
+  },
+  "devDependencies": {
+    "@types/node": "^22.7.5",
+    "@typescript-eslint/eslint-plugin": "^8.8.1",
+    "@typescript-eslint/parser": "^8.8.1",
+    "cross-env": "^7.0.3",
+    "cypress": "^13.15.0",
+    "cypress-real-events": "^1.13.0",
+    "dotenv": "^16.4.5",
+    "eslint": "^9.12.0",
+    "eslint-config-love": "^86.1.1",
+    "eslint-config-next": "14.2.4",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-n": "^17.11.1",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-promise": "^7.1.0",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-testing-library": "^6.3.0",
+    "next-router-mock": "^0.9.13",
+    "next-sitemap": "^4.2.3",
+    "next-superjson-plugin": "^0.6.3",
+    "node-fetch": "^3.3.2",
+    "nodemon": "^3.1.7",
+    "prettier": "^3.3.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "prettier-plugin-tailwindcss": "^0.6.8",
+    "tailwindcss": "^3.4.13",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths": "^4.2.0",
+    "tsx": "^4.19.1",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.8",
+    "vitest": "^2.1.2"
+  },
+  "private": true
+}