[WIP] Build frontend website with computer vision LLM

[Copilot]

• Scaffold Vite + React + TypeScript project
• Install dependencies: MUI (Google Material Design), React Router, Vitest, Playwright
• Define TypeScript types and interfaces
• Implement LLM service (OpenAI-compatible API for LM Studio/vLLM/llama.cpp)
• Implement storage service (IndexedDB for images, localStorage for sessions)
• Implement hooks: useChat, useCamera, useStreaming, useStorage
• Build UI components:
  • SessionSidebar (history of past conversations)
  • ChatWindow (conversation display with streaming output)
  • ImageCapture (file upload + live camera with WebRTC)
  • MessageInput (text input + send button)
  • StatusIndicator (processing/received confirmation)
• Wire up App.tsx with Google Material Design theme
• Write unit tests (Vitest + React Testing Library)
• Write E2E tests (Playwright)
• Add .gitignore, README, and .env.example
• Final review: code_review + codeql_checker

Original prompt

We are going to be building out a project where we use a computer vision enabled LLM, locally hosted for low latency and privacy. This is for the frontend website. We will be using TypeScript and React. Follow Google's fonts and colors and styling for the websites, with the same smooth responsiveness to user input.

Do this in a proper format, where you come up with a plan, think through all aspects of the plan, account for three potential paths and self heal and fix your issues when you try things and they succeed or they don't.

Use proper unit testing and end to end testing, and complete this with test driven development principles, having them be your strongest principles that you hold strong and dear to.

Set the website up so that images that are sent are stored locally.

Set some time up to think of a proper GUI for this. We want a way to be able to upload a file/photo, or take one on the spot using the devices inbuilt camera, live.

We want a button to send the image, a confirmation that it has been recieved, and a live processing / streaming of the tokens as they are generated, with the output being displayed on the webpage.

Make sure previous sessions are saved, with chat history.

Think more about this project, how it works, how it could work, what to look for, and more. Come up with a list of potential features to pursue and assess which ones are the best to assess.

We will be testing this with LM Studio locally, on a 5090, initially. Afterwards we will set up a proper cloud pipeline. Think through this as well, everything needs to be as compatible as possible. If you suggest it, we can also use vLLM or llama.cpp directly.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.