Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/google-gemini/angular-webxr-art-sample
https://github.com/google-gemini/angular-webxr-art-sample
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/google-gemini/angular-webxr-art-sample
- Owner: google-gemini
- License: apache-2.0
- Created: 2024-05-06T22:49:36.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-06-10T22:32:51.000Z (8 months ago)
- Last Synced: 2024-07-25T18:39:24.804Z (6 months ago)
- Language: TypeScript
- Size: 41.4 MB
- Stars: 28
- Watchers: 2
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angular-webxr-art-sample - A WebXR Gallery that creates Generative AI images using [Vertex AI Image Generation](https://cloud.google.com/vertex-ai/generative-ai/docs/image/overview) and creates captioning using [Gemini Multimodel API](https://cloud.google.com/vertex-ai/generative-ai/docs/multimodal/overview#multimodal_models). (Table of contents / Angular)
- fucking-awesome-angular - angular-webxr-art-sample - A WebXR Gallery that creates Generative AI images using 🌎 [Vertex AI Image Generation](cloud.google.com/vertex-ai/generative-ai/docs/image/overview) and creates captioning using 🌎 [Gemini Multimodel API](cloud.google.com/vertex-ai/generative-ai/docs/multimodal/overview#multimodal_models). (Table of contents / Angular)
- fucking-awesome-angular - angular-webxr-art-sample - A WebXR Gallery that creates Generative AI images using 🌎 [Vertex AI Image Generation](cloud.google.com/vertex-ai/generative-ai/docs/image/overview) and creates captioning using 🌎 [Gemini Multimodel API](cloud.google.com/vertex-ai/generative-ai/docs/multimodal/overview#multimodal_models). (Table of contents / Angular)
README
# Angular WebXR Art Sample
Angular WebXR Art Sample is a WebXR Gallery that creates Generative AI images using [Vertex AI Image Generation](https://cloud.google.com/vertex-ai/generative-ai/docs/image/overview) and creates captioning using [Gemini Multimodel API](https://cloud.google.com/vertex-ai/generative-ai/docs/multimodal/overview#multimodal_models).
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.0-rc.1.
[](https://www.youtube.com/shorts/XRvymNPSVF4)
## Pre-requisites
1. Node.js and npm
* Download and install Go: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
2. Gemini API key
* Launch Google AI Studio: https://aistudio.google.com/
* Click “Get API Key”
## Setup
To get started with the Angular app without setting up the Gemini API, you can install the dependencies and run start script.
You need have install Node version 18 and up installed in your development environment.
```
npm install
npm run start
```
### Setting up Gemini API
[Imagen on Vertex AI | AI Image Generator](https://cloud.google.com/vertex-ai/generative-ai/docs/image/overview#feature-launch-stage) image generation feature currently requires allow list. Fill out the [the request form](https://docs.google.com/forms/d/1cqt9padvfMgqn23W5FMPTqh7bW1KLkEOsC5G6uC-uuM/viewform) to get access to the API.
[Enable Gemini Vertex AI](https://console.cloud.google.com/vertex-ai/generative/multimodal/create/text?model=gemini-1.5-pro-preview-0409) in a Google Cloud Project.
#### Run Gemini API locally
- [Install Google Cloud CLI](https://cloud.google.com/sdk/docs/install)
- Run the below commands in your terminal on the root of this project
```
cd server
gcloud init
gcloud config set project
gcloud auth application-default login
python3 -m venv .
. bin/activate
pip install -r requirements.txt
python main.py
```
- Once the Python server is running, start the Angular server in your root folder
```
npm i
```
#### Call the Gemini API in a cloud Function(Optional)
If you would like to run the API on a Google Cloud Function, follow these steps:
- Create a [HTTP triggered Google Cloud Function](https://cloud.google.com/functions/docs/writing/write-http-functions#http-example-python) to make a call to GEMINI API. Copy paste the [Functions/getImages.py](Functions/getImages.py) code in Google Console and deploy your function.
- Replace GEMINI_API_URL value in your src/environments/environment.ts file with the URL of the Google Function API endpoint.
### Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.