{"id":13806206,"url":"https://github.com/gsans/mini-bard-palm2-angular","last_synced_at":"2025-06-12T03:16:08.665Z","repository":{"id":196872525,"uuid":"697278123","full_name":"gsans/mini-bard-palm2-angular","owner":"gsans","description":"Mini-Bard client for Angular using Gemini Pro via API key from Google AI Studio","archived":false,"fork":false,"pushed_at":"2025-02-06T21:58:47.000Z","size":956,"stargazers_count":29,"open_issues_count":0,"forks_count":10,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-18T12:04:22.587Z","etag":null,"topics":["angular","elevenlabs-api","gemini","gemini-pro","gemini-pro-vision","google-ai","google-ai-studio","ngx-markdown","ngx-quill","palm2","vertexai"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gsans.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-27T12:05:10.000Z","updated_at":"2025-02-06T21:58:51.000Z","dependencies_parsed_at":"2023-12-17T21:27:43.437Z","dependency_job_id":"74bfd4f7-2ed5-4618-8c7e-33f92e6ccf8d","html_url":"https://github.com/gsans/mini-bard-palm2-angular","commit_stats":null,"previous_names":["gsans/mini-bard-palm2-angular"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsans%2Fmini-bard-palm2-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsans%2Fmini-bard-palm2-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsans%2Fmini-bard-palm2-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsans%2Fmini-bard-palm2-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gsans","download_url":"https://codeload.github.com/gsans/mini-bard-palm2-angular/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244978333,"owners_count":20541836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","elevenlabs-api","gemini","gemini-pro","gemini-pro-vision","google-ai","google-ai-studio","ngx-markdown","ngx-quill","palm2","vertexai"],"created_at":"2024-08-04T01:01:08.870Z","updated_at":"2025-03-22T15:30:32.090Z","avatar_url":"https://github.com/gsans.png","language":"TypeScript","readme":"# Mini-Gemini Chatbot Angular client using Gemini API (via API key and Google AI Studio)\n\n### Features\n- Support for Google AI and VertexAI APIs\n- Gemini API (generateContent, startChat and sendMessage)\n- Demonstration of Gemini for Text with text-to-speech (ElevenLabs)\n- Demonstration of Gemini for Chat with Rich Media support (markdown, code, emojis, formulas and diagrams)\n- Demonstration of Gemini for Images with Rich Media support (markdown, code, emojis, formulas and diagrams)\n\n### Libraries\n- Angular Material\n- Gemini for Text:\n  - ngx-quill - Angular QuillJS wrapper, a Rich Text Editor\n  - QuillJS. Custom non-editable block (embed blot) to handle model responses.\n  - ElevenLabs API - High quality natural voices\n- Gemini for Chat:\n  - ngx-markdown - Markdown renderer with support for multiple extensions (code fences and highlighting, emojis, Katex mathematic formulas, MermaidJS diagrams and more)\n- Gemini for Images:\n  - ngx-markdown - Markdown renderer with support for multiple extensions (code fences and highlighting, emojis, Katex mathematic formulas, MermaidJS diagrams and more)\n\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli).\n\n## Project Set-up\nRun this Angular CLI command to get the local environment setup:\n\n```\nng g environments\n```\n\nThis will create the following files for `development` and `production`:\n```\nsrc/environments/environment.development.ts\nsrc/environments/environment.ts\n```\n\nChange these files to include your environment setup accordingly. For the examples below we will use the `development` file:\n\n```ts\n// src/environments/environment.development.ts\nexport const environment = {\n  /// your setup\n};\n```\n\nThis project includes clients to both **VertexAI** and **Gemini APIs**.\n\n### Setup for Gemini API access via API key (Google AI Studio)\n\nGet an [API key from Google AI Studio](https://makersuite.google.com/app/apikey), then configure it here. \n\n\u003e Note that access is restricted to the US. Use a VPN to overcome this limitation while outside the US. \n\n```ts\n// src/environments/environment.development.ts\nexport const environment = {\n  API_KEY: \"\u003c\u003cYOUR-API-KEY-FROM-GOOGLE-AI-STUDIO\u003e\u003e\",\n};\n```\n\n### Setup for API access via VertexAI (Google Cloud)\nThis setup requires a `Google Cloud account` and is more advanced both in security and capabilities. VertexAI has access to more advanced Generative AI features (image, code, voice and more) and foundational models.\n\nTo secure the API access, you need to create an account and get the credentials for your application so only you can access it. Here are the steps:\n\n- Sign up for a [Google Cloud account](https://cloud.google.com/free) and [enable billing](https://cloud.google.com/billing/docs/how-to/create-billing-account) — this gives you access to Vertex AI.\n- Create a [new project](https://developers.google.com/workspace/guides/create-project) in the Cloud Console. Make note of the project ID.\n- [Enable the Vertex AI API](https://cloud.google.com/vertex-ai) for your project.\n- [Install the gcloud CLI](https://cloud.google.com/sdk/docs/install) and run gcloud auth print-access-token. Save the printed access token - you’ll use this for authentication.\n\nOnce you have the project ID and access token, you are ready to move on to the Angular app. To verify everything is setup correctly you can try these [curl commands](https://cloud.google.com/vertex-ai/docs/generative-ai/start/quickstarts/api-quickstart).\n\n```ts\n// src/environments/environment.development.ts\nexport const environment = {\n  PROJECT_ID: \"\u003c\u003cYOUR-PROJECT-ID\u003e\u003e\",\n  GCLOUD_AUTH_PRINT_ACCESS_TOKEN: \"\u003c\u003cYOUR-GCLOUD-AUTH-PRINT-ACCESS-TOKEN\u003e\u003e\", \n};\n```\n\n\u003e Make sure that your access token remains private so you do not incur into expenses from unauthorised access.\n\nYou can find more details into how to setup the VertexAI access in this [article](https://medium.com/google-cloud/getting-started-with-generative-ai-in-angular-b72737a59982)\n\n\n### ElevenLabs Setup\nThis project supports the `regular` and `streamed` APIs for faster responsiveness.\n\nYou can use the newest `eleven_multilingual_v2`, a single foundational model supporting 28 languages including English, Chinese, Spanish, Hindi, Portuguese, French, German, Japanese, Arabic, Korean, Indonesian, Italian, Dutch, Turkish, Polish, Swedish, Filipino, Malay, Romanian, Ukrainian, Greek, Czech, Danish, Finnish, Bulgarian, Croatian, Slovak, and Tamil; or `eleven_monolingual_v1`, a low-latency model specifically trained for English speech.\n\nYou need to [generate your API key](https://elevenlabs.io/speech-synthesis) (Sign In/Profile).\n\n#### Picking a voice\nUsing your API key you can either use [Speech Synthesis](https://elevenlabs.io/speech-synthesis) to listen to the voices and open Developer Tools/Network to extract the voice-id from the request or use the API as shown below:\n\n```\ncurl -X 'GET' \\\n'https://api.elevenlabs.io/v1/voices' \\\n-H 'accept: application/json' \\\n-H 'xi-api-key: \u003c\u003cAPI-KEY\u003e\u003e'\n```\n\nPick a voice from the response \n```\n{\n  \"voices\": [\n    {\n      \"voice_id\": \"21m00Tcm4TlvDq8ikWAM\",\n      \"name\": \"Rachel\",\n      \"category\": \"premade\",\n      \"labels\": {\n        \"accent\": \"american\",\n        \"description\": \"calm\",\n        \"age\": \"young\",\n        \"gender\": \"female\",\n        \"use case\": \"narration\"\n      },\n      \"preview_url\": \"https://storage.googleapis.com/eleven-public-prod/premade/voices/21m00Tcm4TlvDq8ikWAM/df6788f9-5c96-470d-8312-aab3b3d8f50a.mp3\",\n      ...\n    },\n  ]\n}\n```\n\nOnce you have the `API key` and `voice-id` you can fill in the remaining entries in the environment file.\n\n```ts\n// src/environments/environment.development.ts\nexport const environment = {\n  ELEVEN_LABS_API_KEY: \"\u003c\u003cELEVEN-LABS-API-KEY\u003e\u003e\",\n  ELEVEN_LABS_VOICE_ID: \"\u003c\u003cELEVEN-LABS-VOICE-ID\u003e\u003e\",\n};\n```\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n","funding_links":[],"categories":["Development Utilities"],"sub_categories":["AI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgsans%2Fmini-bard-palm2-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgsans%2Fmini-bard-palm2-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgsans%2Fmini-bard-palm2-angular/lists"}