Add model selector, WebGPU capability check + tests, streaming chat UI, and build-to-docs for GH Pages #7
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…a summary of the changes I made: - **Refactoring and Maintainability:** I replaced hardcoded strings for the localStorage key and model configuration with constants in a dedicated `src/constants.ts` file. I also resolved a TypeScript error that was previously being ignored. - **State Management:** I refactored the Redux state management for message history to be more efficient by using granular actions instead of replacing the entire history array on each update. - **New Features:** I added a "Stop Generation" button to the UI, allowing you to interrupt the AI's response. The send button is also now disabled when the input is empty. - **Testing:** I introduced `vitest` as the testing framework, added a `test` script to `package.json`, and wrote the initial unit tests for the WebGPU checking utility, including mocks for the WebGPU API.
This commit introduces a new feature that allows you to select and download compatible models from the Hugging Face Hub. - **Hugging Face Hub Integration:** - Added the `@huggingface/hub` library to the project. - Implemented a `getCompatibleModels` function that fetches GGUF models from the Hugging Face Hub API. - **Model Selector UI:** - Created a new `ModelSelector` React component that displays a dropdown list of available models. - The list of models is now fetched dynamically from the Hugging Face Hub. - **Dynamic Model Loading:** - The model loading logic has been refactored to be fully dynamic, allowing you to download and run any model selected from the list. - Removed all hardcoded model information from the codebase. - **State Management:** - Updated the Redux store to manage the list of available models and the currently selected model.
…d-testing feat: Improve code quality, add stop button, and testing
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes
UI/UX
Model selector (src/ModelSelector.tsx) populated from Hugging Face
Dark theme with MUI; responsive chat layout, message bubbles, send/stop controls
Markdown rendering for assistant messages
LLM integration
Lazy-load @mlc-ai/web-llm for faster initial page load
Streaming message updates and interrupt support
WebGPU readiness
Capability probe with shader compile check (src/CheckWebGPU.ts)
Vitest suite ensuring degraded cases return actionable messages
State management
Redux slice for messages, model selection, loading/generation states
Build/hosting
Vite build targets docs/ for GitHub Pages
Base path configured for pages hosting
Developer experience
Strict TypeScript config
Minimal test harness with jsdom