LLM Survey Web Application

This web application allows users to generate student feedback using a configurable prompt and various LLM models via the Doubao API. Users must provide their own Doubao API key.

The interface has been refreshed with a modern look for easier use on both desktop and mobile browsers. The page styling takes cues from the open-source ChuanhuChatGPT space on HuggingFace.

The application consists only of static HTML/CSS/JS that can be hosted directly, for example on GitHub Pages.

Features

• Guidance Page (index.html):
  • View and edit a base prompt.
  • Prompt modifications are saved locally in the browser's localStorage.
• Survey Page (survey.html):
  • Enter student name and a description of their work/behavior.
  • Select an LLM model (e.g., DeepSeek).
  • If an API key has been saved on the Configuration page, the key field is hidden and the saved key is used automatically.
  • Generate feedback based on the prompt and student details.
  • View results or error messages.
• Configuration Page (config.html):
  • Save your Doubao API Key to your browser's localStorage for convenience.
  • Pre-fills the API key field on the Survey page if a key is saved.
  • Option to clear the saved API key.
  • Includes a security warning regarding storing API keys in localStorage.
• Settings Page (settings.html):
  • Configure both your API key and the base prompt in one place.
  • Changes are stored in localStorage and used on other pages.

Project Structure

• /index.html: Guidance page.
• /survey.html: Survey page.
• /config.html: API Key configuration page.
• /settings.html: Combined settings for API key and base prompt.
• /css/style.css: Styles for the application.
• /js/script.js: JavaScript for index.html (prompt handling).
• /js/api.js: JavaScript for survey.html (form handling and calling the Doubao API).
• /js/config.js: JavaScript for config.html (saving/loading API key to/from localStorage).
• /js/settings.js: JavaScript for settings.html.
• /backend/: (optional) Node.js proxy if you prefer not to call the Doubao API directly.
  • backend/server.js: Express server logic.
  • backend/package.json: Node.js project definition.
• /examples/ark_client.py: Standalone example using the Ark Python SDK.

Prerequisites

• A modern web browser.
• A personal Doubao API Key.

Running the Application

Just open the index.html file in your browser (or visit the GitHub Pages URL once deployed). All API requests are sent directly to Doubao.

Deploying to GitHub Pages

1. Push the contents of this repository to your own GitHub repository.
2. In the repository settings, enable GitHub Pages and select the main branch (or any branch you prefer).
3. Once Pages is enabled, visit the generated URL to use the application online.

How it Works

1. The user can optionally save their Doubao API Key on config.html or settings.html, which stores it in the browser's localStorage.
2. The user edits the prompt on index.html, which is saved in localStorage.
3. On survey.html, if an API key was saved via config.html or settings.html, the key field is hidden and the saved key is used automatically. The user only needs to enter the student details and select a model.
4. When "Generate" is clicked, the frontend (js/api.js) sends the request directly to the Doubao API using your API key.
5. The Doubao API responds with generated text, which is shown on the page.

Security Note

• Your Doubao API key is sent directly from your browser to the Doubao API. Always access the site over HTTPS (GitHub Pages uses HTTPS) to protect your key in transit.
• Storing API Keys in localStorage (via config.html or settings.html): While convenient, storing API keys in browser local storage makes them potentially accessible if the site is compromised by an XSS attack or if malicious browser extensions are installed. Use this feature with caution and be aware of the risks.