Yandrik/swa-dojo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: better error message about gemini api key missing

Browse Source
This commit is contained in:
Yandrik
2025-07-09 13:25:48 +02:00
parent a8e8fd8c71
commit 9ed3520f1f
2 changed files with 75 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
App.tsx
View File

@ -250,8 +250,8 @@ const ExerciseSheet: React.FC<ExerciseSheetProps> = ({ exercise, onNext, ai }) =
return Promise.resolve({ return Promise.resolve({
partId: part.id, partId: part.id,
isCorrect: false, isCorrect: false,
explanation: "API-Key fehlt oder ungültig, oder Gemini SDK nicht korrekt geladen.", explanation: "API-Key fehlt oder ungültig, oder Gemini SDK nicht korrekt geladen. Bitte setze deinen API-Key über den Einstellungen-Button oben rechts.",
error: "Gemini API nicht verfügbar" error: "Gemini API nicht verfügbar. Bitte setze deinen API-Key über den Einstellungen-Button oben rechts."
}); });
} }
return evaluateWithGemini(ai, part.userInput, part.solution, part.prompt) return evaluateWithGemini(ai, part.userInput, part.solution, part.prompt)

136
make-practiceapp-deployready.md
View File

@ -9,29 +9,31 @@ This guide details the comprehensive changes implemented to prepare the SWA Prac
**Previous State**: The `package.json` had some dependencies with `latest` or unspecified bundle versions, which can lead to non-deterministic builds. **Previous State**: The `package.json` had some dependencies with `latest` or unspecified bundle versions, which can lead to non-deterministic builds.
**Changes Made**: **Changes Made**:
- **Explicit Versioning**: All dependencies and devDependencies were updated to specific, stable versions. This was done by referencing a known good configuration (e.g., from `oscars-dojo/package.json`).
- `@google/genai`: Changed from `"latest"` to `"latest"` (confirmed `latest` is acceptable for this specific dependency as it's a core library and often updated with breaking changes, so `latest` is often desired). - **Explicit Versioning**: All dependencies and devDependencies were updated to specific, stable versions. This was done by referencing a known good configuration (e.g., from `oscars-dojo/package.json`).
- `@headlessui/react`: Added with version `"^2.2.4"`. - `@google/genai`: Changed from `"latest"` to `"latest"` (confirmed `latest` is acceptable for this specific dependency as it's a core library and often updated with breaking changes, so `latest` is often desired).
- `@heroicons/react`: Added with version `"^2.2.0"`. - `@headlessui/react`: Added with version `"^2.2.4"`.
- `diff`: Changed from `"5?bundle"` to `"5.2.0"`. - `@heroicons/react`: Added with version `"^2.2.0"`.
- `prismjs`: Changed from `"1.29.0"` to `"1.29.0"` (already specific). - `diff`: Changed from `"5?bundle"` to `"5.2.0"`.
- `react`: Changed from `"^19.1.0"` to `"^19.1.0"` (already specific). - `prismjs`: Changed from `"1.29.0"` to `"1.29.0"` (already specific).
- `react-dom`: Changed from `"^19.1.0"` to `"^19.1.0"` (already specific). - `react`: Changed from `"^19.1.0"` to `"^19.1.0"` (already specific).
- `react-markdown`: Changed from `"9?bundle"` to `"9.1.0"`. - `react-dom`: Changed from `"^19.1.0"` to `"^19.1.0"` (already specific).
- `react-simple-code-editor`: Changed from `"0.13.1"` to `"0.13.1"` (already specific). - `react-markdown`: Changed from `"9?bundle"` to `"9.1.0"`.
- `remark-gfm`: Changed from `"4?bundle"` to `"4.0.1"`. - `react-simple-code-editor`: Changed from `"0.13.1"` to `"0.13.1"` (already specific).
- `@types/diff`: Added with version `"^8.0.0"`. - `remark-gfm`: Changed from `"4?bundle"` to `"4.0.1"`.
- `@types/node`: Changed from `"^22.14.0"` to `"^22.14.0"` (already specific). - `@types/diff`: Added with version `"^8.0.0"`.
- `@types/prismjs`: Added with version `"^1.26.5"`. - `@types/node`: Changed from `"^22.14.0"` to `"^22.14.0"` (already specific).
- `@types/react`: Added with version `"^19.1.8"`. - `@types/prismjs`: Added with version `"^1.26.5"`.
- `@types/react-dom`: Added with version `"^19.1.6"`. - `@types/react`: Added with version `"^19.1.8"`.
- `typescript`: Changed from `"~5.7.2"` to `"~5.7.2"` (already specific). - `@types/react-dom`: Added with version `"^19.1.6"`.
- `vite`: Changed from `"^6.2.0"` to `"^6.2.0"` (already specific). - `typescript`: Changed from `"~5.7.2"` to `"~5.7.2"` (already specific).
- `vite`: Changed from `"^6.2.0"` to `"^6.2.0"` (already specific).
**Step-by-step Action**: **Step-by-step Action**:
1. Read the existing `/home/yannik/repos/swa-practice-app/package.json` file.
2. Construct a new `package.json` content with the updated, explicit versions for all dependencies and devDependencies. 1. Read the existing `/home/yannik/repos/swa-practice-app/package.json` file.
3. Write the new content back to `/home/yannik/repos/swa-practice-app/package.json`. 2. Construct a new `package.json` content with the updated, explicit versions for all dependencies and devDependencies.
3. Write the new content back to `/home/yannik/repos/swa-practice-app/package.json`.
**Code Changes (package.json)**: **Code Changes (package.json)**:
@ -77,37 +79,39 @@ This guide details the comprehensive changes implemented to prepare the SWA Prac
**Previous State**: The application either hardcoded the API key or relied solely on environment variables, which is not ideal for client-side applications or user-specific keys. **Previous State**: The application either hardcoded the API key or relied solely on environment variables, which is not ideal for client-side applications or user-specific keys.
**Changes Made**: **Changes Made**:
- **API Key State Management**:
- Introduced `useState` hooks for `apiKey`, `showSettings` (for modal visibility), and `inputKey` (for the input field value). - **API Key State Management**:
- The `apiKey` is now initialized by first checking `localStorage` for a previously saved key. If not found, it falls back to `process.env.API_KEY` (though for client-side, `localStorage` is preferred for user-entered keys). - Introduced `useState` hooks for `apiKey`, `showSettings` (for modal visibility), and `inputKey` (for the input field value).
- The `GoogleGenAI` instance is memoized (`useMemo`) and only created if an `apiKey` is present, preventing errors if the key is missing. - The `apiKey` is now initialized by first checking `localStorage` for a previously saved key. If not found, it falls back to `process.env.API_KEY` (though for client-side, `localStorage` is preferred for user-entered keys).
- **Settings Modal Integration**: - The `GoogleGenAI` instance is memoized (`useMemo`) and only created if an `apiKey` is present, preventing errors if the key is missing.
- A `Cog6ToothIcon` (gear icon) button was added to the top-right corner of the application. - **Settings Modal Integration**:
- Clicking this button opens a `Dialog` (modal) from `@headlessui/react`. - A `Cog6ToothIcon` (gear icon) button was added to the top-right corner of the application.
- The modal contains an input field for the Gemini API key. - Clicking this button opens a `Dialog` (modal) from `@headlessui/react`.
- `"Save"` and `"Cancel"` buttons are provided to manage the input. - The modal contains an input field for the Gemini API key.
- Upon saving, the `inputKey` is stored in `localStorage` under the key `gemini_api_key` and updates the `apiKey` state. - `"Save"` and `"Cancel"` buttons are provided to manage the input.
- **User Guidance in Modal**: - Upon saving, the `inputKey` is stored in `localStorage` under the key `gemini_api_key` and updates the `apiKey` state.
- Added informative text within the settings modal to guide users: - **User Guidance in Modal**:
- `"Your API key is stored in your browser only."` (for transparency regarding local storage). - Added informative text within the settings modal to guide users:
- `"Get an API key at https://aistudio.google.com/ - this app uses gemini-2.5-flash, which is free for 500 requests a day (as of 9.7.2025)"` (providing direct instructions and usage context). - `"Your API key is stored in your browser only."` (for transparency regarding local storage).
- **Robust `evaluateWithGemini` Function**: - `"Get an API key at https://aistudio.google.com/ - this app uses gemini-2.5-flash, which is free for 500 requests a day (as of 9.7.2025)"` (providing direct instructions and usage context).
- Modified the `evaluateWithGemini` function to accept the `ai` instance as a parameter, ensuring it uses the dynamically created `GoogleGenAI` instance. - **Robust `evaluateWithGemini` Function**:
- Added a check within `handleSubmit` in `ExerciseSheet` to verify the `ai` instance and its `models.generateContent` method before making API calls, providing a user-friendly error message if the API key is missing or invalid. - Modified the `evaluateWithGemini` function to accept the `ai` instance as a parameter, ensuring it uses the dynamically created `GoogleGenAI` instance.
- **Template Literal Escaping Fixes**: - Added a check within `handleSubmit` in `ExerciseSheet` to verify the `ai` instance and its `models.generateContent` method before making API calls, providing a user-friendly error message if the API key is missing or invalid.
- Crucially, fixed syntax errors within the `systemInstruction` and `contents` template literals in `evaluateWithGemini`. The original code had issues with unescaped backticks (``` ` ```) and newlines (`\n`) when they were part of the string content itself, leading to build failures. - **Template Literal Escaping Fixes**:
- **Specific Fix**: All literal backticks within the template strings (e.g., for code blocks like ``` ```c ```) were escaped as ``` \`\`\` ```. All literal newlines (`\n`) within the template strings were escaped as `\\n`. This ensures they are interpreted as literal characters within the string rather than JavaScript syntax. - Crucially, fixed syntax errors within the `systemInstruction` and `contents` template literals in `evaluateWithGemini`. The original code had issues with unescaped backticks (``` ` ```) and newlines (`\n`) when they were part of the string content itself, leading to build failures.
- **Specific Fix**: All literal backticks within the template strings (e.g., for code blocks like ``` ```c ```) were escaped as``` \`\`\` ```. All literal newlines (`\n`) within the template strings were escaped as `\\n`. This ensures they are interpreted as literal characters within the string rather than JavaScript syntax.
**Step-by-step Actions**: **Step-by-step Actions**:
1. Read the content of `/home/yannik/repos/swa-practice-app/App.tsx`.
2. Locate the `App` functional component. 1. Read the content of `/home/yannik/repos/swa-practice-app/App.tsx`.
3. Add `useState` and `useEffect` hooks for API key management. 2. Locate the `App` functional component.
4. Integrate the `Dialog` component from `@headlessui/react` for the settings modal. 3. Add `useState` and `useEffect` hooks for API key management.
5. Add the `Cog6ToothIcon` button to trigger the modal. 4. Integrate the `Dialog` component from `@headlessui/react` for the settings modal.
6. Insert the API key input field and save/cancel logic within the modal. 5. Add the `Cog6ToothIcon` button to trigger the modal.
7. Add the informational text about API key acquisition and usage limits to the modal. 6. Insert the API key input field and save/cancel logic within the modal.
8. Modify the `evaluateWithGemini` function signature and its usage within `ExerciseSheet` to pass the `ai` instance. 7. Add the informational text about API key acquisition and usage limits to the modal.
9. Apply the necessary escaping (``` \`\`\` ``` for backticks, `\\n` for newlines) within the `systemInstruction` and `contents` template literals in `evaluateWithGemini`. 8. Modify the `evaluateWithGemini` function signature and its usage within `ExerciseSheet` to pass the `ai` instance.
9. Apply the necessary escaping (``` \`\`\` ``` for backticks, `\\n` for newlines) within the `systemInstruction` and `contents` template literals in `evaluateWithGemini`.
10. Write the modified content back to `/home/yannik/repos/swa-practice-app/App.tsx`. 10. Write the modified content back to `/home/yannik/repos/swa-practice-app/App.tsx`.
**Code Changes (App.tsx)**: **Code Changes (App.tsx)**:
@ -191,8 +195,8 @@ This guide details the comprehensive changes implemented to prepare the SWA Prac
+ return Promise.resolve({ + return Promise.resolve({
+ partId: part.id, + partId: part.id,
+ isCorrect: false, + isCorrect: false,
+ explanation: "API-Key fehlt oder ungültig, oder Gemini SDK nicht korrekt geladen.", + explanation: "API-Key fehlt oder ungültig, oder Gemini SDK nicht korrekt geladen. Bitte setze deinen API-Key über den Einstellungen-Button oben rechts.",
+ error: "Gemini API nicht verfügbar" + error: "Gemini API nicht verfügbar. Bitte setze deinen API-Key über den Einstellungen-Button oben rechts."
+ }); + });
+ } + }
return evaluateWithGemini(ai, part.userInput, part.solution, part.prompt) return evaluateWithGemini(ai, part.userInput, part.solution, part.prompt)
@ -307,16 +311,18 @@ This guide details the comprehensive changes implemented to prepare the SWA Prac
**Previous State**: No Dockerfile existed, requiring manual setup of the Node.js environment and dependencies for deployment. **Previous State**: No Dockerfile existed, requiring manual setup of the Node.js environment and dependencies for deployment.
**Changes Made**: **Changes Made**:
- **Multi-stage Build**: Implemented a multi-stage Dockerfile for optimized image size and build efficiency.
- **`base` stage**: Sets up the Node.js 21-slim image, configures pnpm, copies the application code, and sets the working directory. - **Multi-stage Build**: Implemented a multi-stage Dockerfile for optimized image size and build efficiency.
- **`prod-deps` stage**: Installs only production dependencies using `pnpm install --prod --frozen-lockfile`, leveraging build cache. - **`base` stage**: Sets up the Node.js 21-slim image, configures pnpm, copies the application code, and sets the working directory.
- **`build` stage**: Installs all dependencies and runs the `pnpm run build` command to create the production build, also leveraging build cache. - **`prod-deps` stage**: Installs only production dependencies using `pnpm install --prod --frozen-lockfile`, leveraging build cache.
- **Final stage**: Copies only the necessary `node_modules` from `prod-deps` and the `dist` (build output) from `build`. It then installs `serve` globally to serve the static files. - **`build` stage**: Installs all dependencies and runs the `pnpm run build` command to create the production build, also leveraging build cache.
- **Port Exposure and Command**: Exposes port 8000 and sets the default command to `serve -s dist -l 8000`, making the application accessible. - **Final stage**: Copies only the necessary `node_modules` from `prod-deps` and the `dist` (build output) from `build`. It then installs `serve` globally to serve the static files.
- **Port Exposure and Command**: Exposes port 8000 and sets the default command to `serve -s dist -l 8000`, making the application accessible.
**Step-by-step Action**: **Step-by-step Action**:
1. Construct the Dockerfile content with the specified multi-stage build instructions.
2. Write this content to `/home/yannik/repos/swa-practice-app/Dockerfile`. 1. Construct the Dockerfile content with the specified multi-stage build instructions.
2. Write this content to `/home/yannik/repos/swa-practice-app/Dockerfile`.
**Code Changes (Dockerfile)**: **Code Changes (Dockerfile)**:
@ -350,12 +356,14 @@ CMD [ "serve", "-s", "dist", "-l", "8000" ]
**Previous State**: The `.env.local` file contained `GEMINI_API_KEY=PLACEHOLDER_API_KEY`. **Previous State**: The `.env.local` file contained `GEMINI_API_KEY=PLACEHOLDER_API_KEY`.
**Changes Made**: **Changes Made**:
- **Placeholder Removal**: The `PLACEHOLDER_API_KEY` value was replaced with an empty string, resulting in `GEMINI_API_KEY=`.
- **Placeholder Removal**: The `PLACEHOLDER_API_KEY` value was replaced with an empty string, resulting in `GEMINI_API_KEY=`.
**Step-by-step Action**: **Step-by-step Action**:
1. Read the content of `/home/yannik/repos/swa-practice-app/.env.local`.
2. Replace the string `GEMINI_API_KEY=PLACEHOLDER_API_KEY` with `GEMINI_API_KEY=`. 1. Read the content of `/home/yannik/repos/swa-practice-app/.env.local`.
3. Write the modified content back to `/home/yannik/repos/swa-practice-app/.env.local`. 2. Replace the string `GEMINI_API_KEY=PLACEHOLDER_API_KEY` with `GEMINI_API_KEY=`.
3. Write the modified content back to `/home/yannik/repos/swa-practice-app/.env.local`.
**Code Changes (.env.local)**: **Code Changes (.env.local)**: