modified: journal.rst
This commit is contained in:
parent
595ac0a597
commit
affa6f5ca8
1 changed files with 140 additions and 1 deletions
141
journal.rst
141
journal.rst
|
|
@ -220,4 +220,143 @@ dialog#uncloseai-embedded-modal[data-theme] {
|
|||
✅ **Cross-Site Compatibility**: Consistent behavior across all site types
|
||||
✅ **Maintainability**: Single source of truth for modal styling
|
||||
|
||||
This comprehensive refactoring established a robust CSS architecture that handles all edge cases while providing an optimal user experience across all devices and contexts.
|
||||
This comprehensive refactoring established a robust CSS architecture that handles all edge cases while providing an optimal user experience across all devices and contexts.
|
||||
|
||||
July 11, 2025
|
||||
=============
|
||||
|
||||
Custom API Integration & UI Overhaul
|
||||
-------------------------------------
|
||||
|
||||
**Major Features Implemented:**
|
||||
|
||||
Custom API Endpoint Support
|
||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
Implemented comprehensive custom OpenAI-compatible API support allowing users to integrate their own AI providers (Groq, OpenAI, Claude, etc.) into the chat system:
|
||||
|
||||
- **Centralized Configuration System**: Created ``getAPIConfig()`` in ``config.js`` to manage API settings
|
||||
- **Universal API Call Patching**: All chat functions now check for custom configuration automatically
|
||||
- **Dynamic Model Discovery**: System fetches available models from custom endpoints via ``/v1/models``
|
||||
- **Intelligent Max Tokens**: Automatically detects context limits from model metadata:
|
||||
- VLLM: ``max_model_len`` (e.g., 82,000 tokens)
|
||||
- OpenAI: ``max_tokens`` (e.g., 8,192 tokens)
|
||||
- Groq: ``context_length`` (e.g., 128,000 tokens)
|
||||
- **Seamless Fallback**: Falls back to default Hermes endpoints when custom API unavailable
|
||||
|
||||
**Settings Panel Complete Redesign**
|
||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
Restructured the settings interface for better organization and usability:
|
||||
|
||||
- **Two-Column Grid Layout**: Left column (Model, Voice, Language), Right column (API Configuration)
|
||||
- **Quick Actions Header**: Action buttons span both columns at the top for prominence
|
||||
- **Mobile Responsive**: Automatically stacks to single column on screens ≤768px
|
||||
- **Label Cleanup**: Removed redundant section headers (``AI Model:``, ``TTS Voice:``, etc.) for cleaner look
|
||||
- **Grid Override Fixes**: Added ``!important`` declarations to overcome PicoCSS conflicts
|
||||
|
||||
**Translation System Improvements**
|
||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
Enhanced the multilingual system with new keys and cleanup:
|
||||
|
||||
- **Chat Audio Downloads**: Added ``downloadChatAudio`` key for chat message audio
|
||||
- **Custom API Description**: Added ``useCustomAPI`` across all 19 languages: "Use a custom openai compatible endpoint."
|
||||
- **Translation Cleanup**: Removed 5 unused keys (``modelLabel``, ``voiceLabel``, ``languageLabel``, ``quickActions``, ``apiConfigLabel``)
|
||||
- **Validator Updates**: Enhanced verification scripts to handle translation changes
|
||||
|
||||
**Critical Bug Fixes:**
|
||||
|
||||
Model Selection System Overhaul
|
||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
Fixed fundamental issues with model selection that were causing API mismatches:
|
||||
|
||||
**Issue**: Users selected Groq models but system sent requests to Hermes models
|
||||
**Root Cause**: Modal model dropdown had no HTML ID, causing ``getSelectedModel()`` to fall back to defaults
|
||||
|
||||
**Solution**:
|
||||
- Added ``id="hermes-model-selection"`` to modal dropdown
|
||||
- Enhanced debug logging to trace model selection flow
|
||||
- Fixed model registry to properly store endpoint relationships
|
||||
|
||||
**Cache System Enhancement**
|
||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
Fixed refresh models button not working when custom API settings changed:
|
||||
|
||||
**Issue**: Clicking refresh didn't fetch new models after enabling custom API
|
||||
**Root Cause**: Cache key only considered ``VLLM_ENDPOINTS`` array, not custom API configuration
|
||||
|
||||
**Solution**:
|
||||
- Include custom API settings in cache hash key
|
||||
- Cache now properly invalidates when toggling custom API
|
||||
- Test case: Checking/unchecking custom API produces different model lists
|
||||
|
||||
**Error Handling & Debugging**
|
||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
Added comprehensive error tracking and debugging tools:
|
||||
|
||||
- **API Error Details**: Full HTTP status codes and response bodies logged
|
||||
- **Model Selection Tracing**: Debug messages show exactly which model is selected and why
|
||||
- **Configuration Verification**: Clear console indicators for custom vs default API usage
|
||||
- **Max Tokens Logging**: Shows token limits being used for each request type
|
||||
|
||||
**Technical Implementation Details:**
|
||||
|
||||
**Files Modified:**
|
||||
- ``src/config.js`` - Central API configuration with ``getAPIConfig()``
|
||||
- ``src/models.js`` - Enhanced model selection, caching, and max_tokens support
|
||||
- ``src/chat.js`` - Dynamic max_tokens for all chat functions
|
||||
- ``src/translation.js`` - Custom API support with dynamic token limits
|
||||
- ``src/ui.js`` - Intro generation API integration
|
||||
- ``src/uncloseai-embed-modal.js`` - Settings UI redesign and model dropdown ID fix
|
||||
- ``src/uncloseai-modal-*.css`` - Grid layouts and responsive design improvements
|
||||
- ``src/languages/*.js`` - Translation updates across all 19 language files
|
||||
|
||||
**API Call Patching Strategy:**
|
||||
All API functions now follow this pattern:
|
||||
```javascript
|
||||
const apiConfig = await getAPIConfig();
|
||||
if (apiConfig.isCustom) {
|
||||
// Use custom endpoint, API key, and selected model
|
||||
apiUrl = `${apiConfig.endpoint}/chat/completions`;
|
||||
headers = { "Authorization": `Bearer ${apiConfig.apiKey}` };
|
||||
model = apiConfig.model;
|
||||
} else {
|
||||
// Use default Hermes configuration
|
||||
apiUrl = `${getSelectedModelEndpoint()}/chat/completions`;
|
||||
headers = { "Authorization": `Bearer ${API_KEY}` };
|
||||
model = getSelectedModel();
|
||||
}
|
||||
```
|
||||
|
||||
**Dynamic Max Tokens Implementation:**
|
||||
```javascript
|
||||
const maxTokens = getSelectedModelMaxTokens(); // Reads from model registry
|
||||
// Translation: Could be 70,000 for VLLM or 8,192 for Groq
|
||||
// Chat: Adapts to whatever the selected model supports
|
||||
```
|
||||
|
||||
**UI Flow Improvements:**
|
||||
1. User configures custom API (base URL + API key)
|
||||
2. Clicks "🔄 Refresh Models" → Fetches models from both Hermes + custom endpoint
|
||||
3. Selects model from combined dropdown (e.g., ``https://api.groq.com/openai/v1-llama-3.1-8b-instant``)
|
||||
4. All features (chat, translation) automatically use selected custom model
|
||||
|
||||
**Deployment Notes:**
|
||||
- **Backward Compatible**: Existing users continue using Hermes by default
|
||||
- **Progressive Enhancement**: Custom API is opt-in with fallback protection
|
||||
- **Cache Management**: Model cache automatically refreshes when configuration changes
|
||||
- **Cross-Platform**: Works on both modal interface and blog site integration
|
||||
|
||||
**Testing Completed:**
|
||||
- ✅ Custom API integration with Groq, OpenAI endpoints
|
||||
- ✅ Model selection working across modal and blog interfaces
|
||||
- ✅ Dynamic max_tokens based on model capabilities (82k for VLLM, 8k for Groq)
|
||||
- ✅ Cache invalidation when toggling custom API settings
|
||||
- ✅ Mobile responsive 2-column grid layout
|
||||
- ✅ Translation key cleanup across all 19 languages
|
||||
|
||||
This release transforms the AI chat system from a single-provider solution into a flexible, multi-provider platform while maintaining the clean user experience and adding significant debugging capabilities for troubleshooting.
|
||||
Loading…
Add table
Add a link
Reference in a new issue