feat(api): new api init

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

frontend/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# 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

frontend/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

frontend/app/chat/page.tsx

@@ -0,0 +1,41 @@
+'use client';
+import { useState } from 'react';
+import axios from 'axios';
+
+export default function ChatPage() {
+  const [question, setQuestion] = useState('');
+  const [history, setHistory] = useState([['User', 'Hello!']]);
+
+  const askQuestion = async () => {
+    const response = await axios.post('http://localhost:8000/chat/', {
+      model: 'gpt-3.5-turbo',
+      question,
+      history
+    });
+    setHistory(response.data.history);
+    setQuestion('');
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-200 py-2">
+      <div className="px-4 py-5 bg-white shadow rounded-lg w-full md:w-1/2">
+        {history.map(([speaker, text], idx) => (
+          <p key={idx} className="mb-4 text-black">
+            <b className="mr-2 text-black">{speaker}:</b> {text}
+          </p>
+        ))}
+      </div>
+      <div className="mt-6">
+        <input
+          type="text"
+          value={question}
+          onChange={(e) => setQuestion(e.target.value)}
+          className="px-3 py-2 border border-gray-300 shadow-sm rounded-md focus:outline-none text-black focus:ring-2 focus:ring-indigo-600"
+        />
+        <button onClick={askQuestion} className="ml-2 px-4 py-2 bg-indigo-600 text-white rounded-md shadow-sm hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+          Ask
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/app/globals.css

@@ -0,0 +1,33 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+/* Tailwind's text-white is a utility class that sets the color of the text to white. 
+   This will override it to use the foreground color from your root variables. */
+.text-white {
+  color: rgb(var(--foreground-rgb)) !important;
+}

frontend/app/layout.tsx

@@ -0,0 +1,21 @@
+import './globals.css'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  )
+}

frontend/app/page.tsx

@@ -0,0 +1,24 @@
+'use client';
+import Link from 'next/link';
+
+export default function HomePage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+      <div className="m-4 p-6 max-w-md mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
+        <h1 className="mb-4 text-xl font-bold text-gray-900">Welcome!</h1>
+        <div className="flex flex-col space-y-4">
+          <Link href="/chat">
+            <a className="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
+              Go to Chat
+            </a>
+          </Link>
+          <Link href="/upload">
+            <a className="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
+              Go to Upload
+            </a>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/upload/page.tsx

@@ -0,0 +1,49 @@
+'use client';
+import { useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import axios from 'axios';
+
+export default function UploadPage() {
+  const [message, setMessage] = useState(null);
+
+  const onDrop = useCallback(async (acceptedFiles) => {
+    const file = acceptedFiles[0];
+    const formData = new FormData();
+    formData.append('file', file);
+    try {
+      const response = await axios.post('http://localhost:8000/upload', formData);
+      setMessage({
+        type: 'success',
+        text: 'File uploaded successfully: ' + JSON.stringify(response.data)
+      });
+    } catch (error) {
+      setMessage({
+        type: 'error',
+        text: 'Failed to upload file: ' + error.toString()
+      });
+    }
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
+  return (
+    <div 
+      {...getRootProps()} 
+      className="flex flex-col items-center justify-center h-screen bg-gray-100"
+    >
+      <input {...getInputProps()} />
+      <div className="mt-2 p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
+        {
+          isDragActive
+            ? <p className="text-blue-600">Drop the files here...</p>
+            : <p className="text-gray-500">Drag 'n' drop some files here, or click to select files</p>
+        }
+      </div>
+      {message && (
+        <div className={`mt-4 p-2 rounded ${message.type === 'success' ? 'bg-green-500' : 'bg-red-500'}`}>
+          <p className="text-white">{message.text}</p>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig