feat: better error message about gemini api key missing
This commit is contained in:
4
App.tsx
4
App.tsx
@ -250,8 +250,8 @@ const ExerciseSheet: React.FC<ExerciseSheetProps> = ({ exercise, onNext, ai }) =
|
||||
return Promise.resolve({
|
||||
partId: part.id,
|
||||
isCorrect: false,
|
||||
explanation: "API-Key fehlt oder ungültig, oder Gemini SDK nicht korrekt geladen.",
|
||||
error: "Gemini API nicht verfügbar"
|
||||
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. Bitte setze deinen API-Key über den Einstellungen-Button oben rechts."
|
||||
});
|
||||
}
|
||||
return evaluateWithGemini(ai, part.userInput, part.solution, part.prompt)
|
||||
|
||||
@ -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.
|
||||
|
||||
**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).
|
||||
- `@headlessui/react`: Added with version `"^2.2.4"`.
|
||||
- `@heroicons/react`: Added with version `"^2.2.0"`.
|
||||
- `diff`: Changed from `"5?bundle"` to `"5.2.0"`.
|
||||
- `prismjs`: Changed from `"1.29.0"` to `"1.29.0"` (already specific).
|
||||
- `react`: Changed from `"^19.1.0"` to `"^19.1.0"` (already specific).
|
||||
- `react-dom`: Changed from `"^19.1.0"` to `"^19.1.0"` (already specific).
|
||||
- `react-markdown`: Changed from `"9?bundle"` to `"9.1.0"`.
|
||||
- `react-simple-code-editor`: Changed from `"0.13.1"` to `"0.13.1"` (already specific).
|
||||
- `remark-gfm`: Changed from `"4?bundle"` to `"4.0.1"`.
|
||||
- `@types/diff`: Added with version `"^8.0.0"`.
|
||||
- `@types/node`: Changed from `"^22.14.0"` to `"^22.14.0"` (already specific).
|
||||
- `@types/prismjs`: Added with version `"^1.26.5"`.
|
||||
- `@types/react`: Added with version `"^19.1.8"`.
|
||||
- `@types/react-dom`: Added with version `"^19.1.6"`.
|
||||
- `typescript`: Changed from `"~5.7.2"` to `"~5.7.2"` (already specific).
|
||||
- `vite`: Changed from `"^6.2.0"` to `"^6.2.0"` (already specific).
|
||||
|
||||
- **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).
|
||||
- `@headlessui/react`: Added with version `"^2.2.4"`.
|
||||
- `@heroicons/react`: Added with version `"^2.2.0"`.
|
||||
- `diff`: Changed from `"5?bundle"` to `"5.2.0"`.
|
||||
- `prismjs`: Changed from `"1.29.0"` to `"1.29.0"` (already specific).
|
||||
- `react`: Changed from `"^19.1.0"` to `"^19.1.0"` (already specific).
|
||||
- `react-dom`: Changed from `"^19.1.0"` to `"^19.1.0"` (already specific).
|
||||
- `react-markdown`: Changed from `"9?bundle"` to `"9.1.0"`.
|
||||
- `react-simple-code-editor`: Changed from `"0.13.1"` to `"0.13.1"` (already specific).
|
||||
- `remark-gfm`: Changed from `"4?bundle"` to `"4.0.1"`.
|
||||
- `@types/diff`: Added with version `"^8.0.0"`.
|
||||
- `@types/node`: Changed from `"^22.14.0"` to `"^22.14.0"` (already specific).
|
||||
- `@types/prismjs`: Added with version `"^1.26.5"`.
|
||||
- `@types/react`: Added with version `"^19.1.8"`.
|
||||
- `@types/react-dom`: Added with version `"^19.1.6"`.
|
||||
- `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**:
|
||||
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.
|
||||
3. Write the new content back to `/home/yannik/repos/swa-practice-app/package.json`.
|
||||
|
||||
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.
|
||||
3. Write the new content back to `/home/yannik/repos/swa-practice-app/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.
|
||||
|
||||
**Changes Made**:
|
||||
- **API Key State Management**:
|
||||
- Introduced `useState` hooks for `apiKey`, `showSettings` (for modal visibility), and `inputKey` (for the input field value).
|
||||
- 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).
|
||||
- The `GoogleGenAI` instance is memoized (`useMemo`) and only created if an `apiKey` is present, preventing errors if the key is missing.
|
||||
- **Settings Modal Integration**:
|
||||
- A `Cog6ToothIcon` (gear icon) button was added to the top-right corner of the application.
|
||||
- Clicking this button opens a `Dialog` (modal) from `@headlessui/react`.
|
||||
- The modal contains an input field for the Gemini API key.
|
||||
- `"Save"` and `"Cancel"` buttons are provided to manage the input.
|
||||
- Upon saving, the `inputKey` is stored in `localStorage` under the key `gemini_api_key` and updates the `apiKey` state.
|
||||
- **User Guidance in Modal**:
|
||||
- Added informative text within the settings modal to guide users:
|
||||
- `"Your API key is stored in your browser only."` (for transparency regarding local storage).
|
||||
- `"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).
|
||||
- **Robust `evaluateWithGemini` Function**:
|
||||
- Modified the `evaluateWithGemini` function to accept the `ai` instance as a parameter, ensuring it uses the dynamically created `GoogleGenAI` instance.
|
||||
- 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.
|
||||
- **Template Literal Escaping Fixes**:
|
||||
- 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.
|
||||
|
||||
- **API Key State Management**:
|
||||
- Introduced `useState` hooks for `apiKey`, `showSettings` (for modal visibility), and `inputKey` (for the input field value).
|
||||
- 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).
|
||||
- The `GoogleGenAI` instance is memoized (`useMemo`) and only created if an `apiKey` is present, preventing errors if the key is missing.
|
||||
- **Settings Modal Integration**:
|
||||
- A `Cog6ToothIcon` (gear icon) button was added to the top-right corner of the application.
|
||||
- Clicking this button opens a `Dialog` (modal) from `@headlessui/react`.
|
||||
- The modal contains an input field for the Gemini API key.
|
||||
- `"Save"` and `"Cancel"` buttons are provided to manage the input.
|
||||
- Upon saving, the `inputKey` is stored in `localStorage` under the key `gemini_api_key` and updates the `apiKey` state.
|
||||
- **User Guidance in Modal**:
|
||||
- Added informative text within the settings modal to guide users:
|
||||
- `"Your API key is stored in your browser only."` (for transparency regarding local storage).
|
||||
- `"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).
|
||||
- **Robust `evaluateWithGemini` Function**:
|
||||
- Modified the `evaluateWithGemini` function to accept the `ai` instance as a parameter, ensuring it uses the dynamically created `GoogleGenAI` instance.
|
||||
- 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.
|
||||
- **Template Literal Escaping Fixes**:
|
||||
- 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**:
|
||||
1. Read the content of `/home/yannik/repos/swa-practice-app/App.tsx`.
|
||||
2. Locate the `App` functional component.
|
||||
3. Add `useState` and `useEffect` hooks for API key management.
|
||||
4. Integrate the `Dialog` component from `@headlessui/react` for the settings modal.
|
||||
5. Add the `Cog6ToothIcon` button to trigger the modal.
|
||||
6. Insert the API key input field and save/cancel logic within the modal.
|
||||
7. Add the informational text about API key acquisition and usage limits to the modal.
|
||||
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`.
|
||||
|
||||
1. Read the content of `/home/yannik/repos/swa-practice-app/App.tsx`.
|
||||
2. Locate the `App` functional component.
|
||||
3. Add `useState` and `useEffect` hooks for API key management.
|
||||
4. Integrate the `Dialog` component from `@headlessui/react` for the settings modal.
|
||||
5. Add the `Cog6ToothIcon` button to trigger the modal.
|
||||
6. Insert the API key input field and save/cancel logic within the modal.
|
||||
7. Add the informational text about API key acquisition and usage limits to the modal.
|
||||
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`.
|
||||
|
||||
**Code Changes (App.tsx)**:
|
||||
@ -191,8 +195,8 @@ This guide details the comprehensive changes implemented to prepare the SWA Prac
|
||||
+ return Promise.resolve({
|
||||
+ partId: part.id,
|
||||
+ isCorrect: false,
|
||||
+ explanation: "API-Key fehlt oder ungültig, oder Gemini SDK nicht korrekt geladen.",
|
||||
+ error: "Gemini API nicht verfügbar"
|
||||
+ 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. Bitte setze deinen API-Key über den Einstellungen-Button oben rechts."
|
||||
+ });
|
||||
+ }
|
||||
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.
|
||||
|
||||
**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.
|
||||
- **`prod-deps` stage**: Installs only production dependencies using `pnpm install --prod --frozen-lockfile`, leveraging build cache.
|
||||
- **`build` stage**: Installs all dependencies and runs the `pnpm run build` command to create the production build, also 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.
|
||||
- **Port Exposure and Command**: Exposes port 8000 and sets the default command to `serve -s dist -l 8000`, making the application accessible.
|
||||
|
||||
- **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.
|
||||
- **`prod-deps` stage**: Installs only production dependencies using `pnpm install --prod --frozen-lockfile`, leveraging build cache.
|
||||
- **`build` stage**: Installs all dependencies and runs the `pnpm run build` command to create the production build, also 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.
|
||||
- **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**:
|
||||
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)**:
|
||||
|
||||
@ -350,12 +356,14 @@ CMD [ "serve", "-s", "dist", "-l", "8000" ]
|
||||
**Previous State**: The `.env.local` file contained `GEMINI_API_KEY=PLACEHOLDER_API_KEY`.
|
||||
|
||||
**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**:
|
||||
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=`.
|
||||
3. Write the modified content back to `/home/yannik/repos/swa-practice-app/.env.local`.
|
||||
|
||||
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=`.
|
||||
3. Write the modified content back to `/home/yannik/repos/swa-practice-app/.env.local`.
|
||||
|
||||
**Code Changes (.env.local)**:
|
||||
|
||||
@ -367,4 +375,4 @@ CMD [ "serve", "-s", "dist", "-l", "8000" ]
|
||||
+GEMINI_API_KEY=
|
||||
```
|
||||
|
||||
---
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user