2 |
8 |
23 |
24 |
38 |
--------------------------------------------------------------------------------
/server/src/app/app.controller.ts:
--------------------------------------------------------------------------------
1 | import { Controller, Post, Body, UseInterceptors, UploadedFile } from '@nestjs/common';
2 | import { FileInterceptor } from '@nestjs/platform-express';
3 | import { Express } from 'express';
4 | import Multer from 'multer';
5 |
6 | import { ChatContent } from 'data-model';
7 | import { ChatService } from './chat.service';
8 | import { TextService } from './text.service';
9 | import { VisionService } from './vision.service';
10 |
11 | @Controller()
12 | export class AppController {
13 |
14 | constructor(private readonly chatService: ChatService,
15 | private readonly textService: TextService,
16 | private readonly visionService: VisionService) {}
17 |
18 | @Post('chat')
19 | chat(@Body() chatContent: ChatContent) {
20 | return this.chatService.chat(chatContent);
21 | }
22 |
23 | @Post('text')
24 | text(@Body() chatContent: ChatContent) {
25 | return this.textService.generateText(chatContent.message);
26 | }
27 |
28 | @Post('vision')
29 | @UseInterceptors(FileInterceptor('file'))
30 | uploadFile(@UploadedFile() file: Express.Multer.File, @Body() body: {message: string}) {
31 | return this.visionService.vision(body.message, file);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/server/src/app/chat.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@nestjs/common';
2 | import {
3 | ChatSession,
4 | GenerativeModel,
5 | GoogleGenerativeAI,
6 | } from '@google/generative-ai';
7 |
8 | import { ChatContent } from 'data-model';
9 |
10 | @Injectable()
11 | export class ChatService {
12 | model: GenerativeModel;
13 | chatSession: ChatSession;
14 | constructor() {
15 | const genAI = new GoogleGenerativeAI(process.env.API_KEY);
16 | this.model = genAI.getGenerativeModel({ model: 'gemini-pro' });
17 | this.chatSession = this.model.startChat({
18 | history: [
19 | {
20 | role: 'user',
21 | parts: `You're a poet. Respond to all questions with a rhyming poem.
22 | What is the capital of California?
23 | `,
24 | },
25 | {
26 | role: 'model',
27 | parts:
28 | 'If the capital of California is what you seek, Sacramento is where you ought to peek.',
29 | },
30 | ],
31 | });
32 | }
33 |
34 | async chat(chatContent: ChatContent): Promise
13 | ![]()
14 |
21 |
22 |
2 |
8 |
27 |
28 |
42 |
--------------------------------------------------------------------------------
/client/src/app/chat/chat.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | height: 100%;
3 | display: flex;
4 | flex-direction: column;
5 | }
6 |
7 | .chat-input {
8 | padding-top: 20px;
9 | width: calc(100% - 48px);
10 | }
11 |
12 | .user {
13 | background-color: white;
14 | }
15 |
16 | .chatbot {
17 | background-color: #e8eaf6;
18 | }
19 |
20 | .chat-footer-container {
21 | display: flex;
22 | align-items: center;
23 | padding: 0 0 0 10px;
24 | }
25 |
26 | .chat-container {
27 | overflow: auto;
28 | padding: 0 10px 0 10px;
29 | height: 100%;
30 | }
31 |
32 | .chat-message {
33 | display: flex;
34 | align-items: flex-start;
35 | padding: 10px;
36 | margin-top: 10px;
37 | border-radius: 10px;
38 | }
39 |
40 | .avatar {
41 | width: 50px;
42 | height: 50px;
43 | border-radius: 50%;
44 | margin-right: 10px;
45 | }
46 |
47 | .message-details {
48 | flex: 1;
49 | align-self: center;
50 | }
51 |
52 | .username {
53 | font-weight: bold;
54 | color: #333;
55 | }
56 |
57 | .message-content {
58 | margin: 5px 0;
59 | color: #666;
60 | }
61 |
62 | .message-container {
63 | display: flex;
64 | justify-content: center;
65 | align-items: center;
66 | height: 100%;
67 | }
68 |
69 | .message {
70 | text-align: center;
71 | color: #333;
72 | padding: 20px;
73 | }
74 |
75 | @keyframes fadeIn {
76 | from {
77 | opacity: 0;
78 | }
79 | to {
80 | opacity: 1;
81 | }
82 | }
83 |
84 | .loading {
85 | font-size: 30px;
86 | animation: fadeIn 1s ease-in-out infinite;
87 | }
88 |
89 | .example-container {
90 | width: auto;
91 | height: 100%;
92 | border: 1px solid rgba(0, 0, 0, 0.5);
93 | }
94 |
--------------------------------------------------------------------------------
/nx.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/nx/schemas/nx-schema.json",
3 | "namedInputs": {
4 | "default": ["{projectRoot}/**/*", "sharedGlobals"],
5 | "production": [
6 | "default",
7 | "!{projectRoot}/.eslintrc.json",
8 | "!{projectRoot}/eslint.config.js",
9 | "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
10 | "!{projectRoot}/tsconfig.spec.json",
11 | "!{projectRoot}/jest.config.[jt]s",
12 | "!{projectRoot}/src/test-setup.[jt]s",
13 | "!{projectRoot}/test-setup.[jt]s"
14 | ],
15 | "sharedGlobals": []
16 | },
17 | "targetDefaults": {
18 | "@angular-devkit/build-angular:application": {
19 | "cache": true,
20 | "dependsOn": ["^build"],
21 | "inputs": ["production", "^production"]
22 | },
23 | "@nx/js:tsc": {
24 | "cache": true,
25 | "dependsOn": ["^build"],
26 | "inputs": ["production", "^production"]
27 | }
28 | },
29 | "plugins": [
30 | {
31 | "plugin": "@nx/eslint/plugin",
32 | "options": {
33 | "targetName": "lint"
34 | }
35 | },
36 | {
37 | "plugin": "@nx/jest/plugin",
38 | "options": {
39 | "targetName": "test"
40 | }
41 | },
42 | {
43 | "plugin": "@nx/webpack/plugin",
44 | "options": {
45 | "buildTargetName": "build",
46 | "serveTargetName": "serve",
47 | "previewTargetName": "preview"
48 | }
49 | }
50 | ],
51 | "generators": {
52 | "@nx/angular:application": {
53 | "e2eTestRunner": "none",
54 | "linter": "eslint",
55 | "style": "scss",
56 | "unitTestRunner": "jest"
57 | },
58 | "@nx/angular:component": {
59 | "style": "css"
60 | }
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/client/src/app/text/text.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | height: 100%;
3 | display: flex;
4 | flex-direction: column;
5 | }
6 |
7 | .chat-input {
8 | padding-top: 20px;
9 | width: calc(100% - 48px);
10 | }
11 |
12 | .user {
13 | background-color: white;
14 | }
15 |
16 | .chatbot {
17 | background-color: #e8eaf6;
18 | }
19 |
20 | .chat-footer-container {
21 | display: flex;
22 | align-items: center;
23 | padding: 0 0 0 10px;
24 | }
25 |
26 | .chat-container {
27 | overflow: auto;
28 | padding: 0 10px 0 10px;
29 | height: 100%;
30 | }
31 |
32 | .chat-message {
33 | display: flex;
34 | align-items: flex-start;
35 | padding: 10px;
36 | margin-top: 10px;
37 | border-radius: 10px;
38 | }
39 |
40 | .avatar {
41 | width: 50px;
42 | height: 50px;
43 | border-radius: 50%;
44 | margin-right: 10px;
45 | }
46 |
47 | .message-details {
48 | flex: 1;
49 | align-self: center;
50 | }
51 |
52 | .username {
53 | font-weight: bold;
54 | color: #333;
55 | }
56 |
57 | .message-content {
58 | margin: 5px 0;
59 | color: #666;
60 | }
61 |
62 | .message-container {
63 | display: flex;
64 | justify-content: center;
65 | align-items: center;
66 | height: 100%;
67 | }
68 |
69 | .message {
70 | text-align: center;
71 | color: #333;
72 | padding: 20px;
73 | }
74 |
75 | @keyframes fadeIn {
76 | from {
77 | opacity: 0;
78 | }
79 | to {
80 | opacity: 1;
81 | }
82 | }
83 |
84 | .loading {
85 | font-size: 30px;
86 | animation: fadeIn 1s ease-in-out infinite;
87 | }
88 |
89 | .example-container {
90 | width: auto;
91 | height: 100%;
92 | border: 1px solid rgba(0, 0, 0, 0.5);
93 | }
94 |
95 | .context-container .mat-expansion-panel-header-description {
96 | justify-content: space-between;
97 | align-items: center;
98 | }
99 |
--------------------------------------------------------------------------------
/client/src/app/vision/vision.component.html:
--------------------------------------------------------------------------------
1 |
13 | ![]()
14 |
25 |
26 |
2 |
8 |
24 |
25 |
13 | ![]()
14 |
23 |
15 | ![Image Preview]()
16 |
21 |
22 |
26 |
27 |
46 |
49 |
--------------------------------------------------------------------------------
/client/src/app/chat/chat.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule } from '@angular/forms';
4 |
5 | import { MatIconModule } from '@angular/material/icon';
6 | import { MatInputModule } from '@angular/material/input';
7 | import { MatButtonModule } from '@angular/material/button';
8 | import { MatFormFieldModule } from '@angular/material/form-field';
9 |
10 | import { GeminiService } from '../gemini.service';
11 | import { LineBreakPipe } from '../line-break.pipe';
12 | import { finalize } from 'rxjs';
13 | import { ClientChatContent } from '../client-chat-content';
14 |
15 |
16 | @Component({
17 | selector: 'corp-chat',
18 | standalone: true,
19 | imports: [
20 | CommonModule,
21 | MatIconModule,
22 | MatInputModule,
23 | MatButtonModule,
24 | MatFormFieldModule,
25 | FormsModule,
26 | LineBreakPipe,
27 | ],
28 | templateUrl: './chat.component.html',
29 | styleUrls: ['./chat.component.scss']
30 | })
31 | export class ChatComponent {
32 | message = '';
33 |
34 | contents: ClientChatContent[] = [];
35 |
36 | constructor(private geminiService: GeminiService) {}
37 |
38 | sendMessage(message: string): void {
39 | const chatContent: ClientChatContent = {
40 | agent: 'user',
41 | message,
42 | };
43 |
44 | this.contents.push(chatContent);
45 | this.contents.push({
46 | agent: 'chatbot',
47 | message: '...',
48 | loading: true,
49 | });
50 |
51 | this.message = '';
52 | this.geminiService
53 | .chat(chatContent)
54 | .pipe(
55 | finalize(() => {
56 | const loadingMessageIndex = this.contents.findIndex(
57 | (content) => content.loading
58 | );
59 | if (loadingMessageIndex !== -1) {
60 | this.contents.splice(loadingMessageIndex, 1);
61 | }
62 | })
63 | )
64 | .subscribe((content) => {
65 | this.contents.push(content);
66 | });
67 | }
68 |
69 | }
70 |
--------------------------------------------------------------------------------
/client/src/app/text/text.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule } from '@angular/forms';
4 |
5 | import { MatIconModule } from '@angular/material/icon';
6 | import { MatInputModule } from '@angular/material/input';
7 | import { MatButtonModule } from '@angular/material/button';
8 | import { MatFormFieldModule } from '@angular/material/form-field';
9 |
10 | import { MarkdownModule } from 'ngx-markdown';
11 |
12 | import { GeminiService } from '../gemini.service';
13 | import { ClientChatContent } from '../client-chat-content';
14 | import { LineBreakPipe } from '../line-break.pipe';
15 | import { finalize } from 'rxjs';
16 |
17 |
18 | @Component({
19 | selector: 'corp-text',
20 | standalone: true,
21 | imports: [
22 | CommonModule,
23 | MatIconModule,
24 | MatInputModule,
25 | MatButtonModule,
26 | MatFormFieldModule,
27 | FormsModule,
28 | LineBreakPipe,
29 | MarkdownModule
30 | ],
31 | templateUrl: './text.component.html',
32 | styleUrls: ['./text.component.scss']
33 | })
34 | export class TextComponent {
35 | message = '';
36 | contents: ClientChatContent[] = [];
37 |
38 | constructor(private geminiService: GeminiService) {}
39 |
40 | generateText(message: string): void {
41 | const chatContent: ClientChatContent = {
42 | agent: 'user',
43 | message,
44 | };
45 |
46 | this.contents.push(chatContent);
47 | this.contents.push({
48 | agent: 'chatbot',
49 | message: '...',
50 | loading: true,
51 | });
52 |
53 | this.message = '';
54 | this.geminiService
55 | .generateText(message)
56 | .pipe(
57 | finalize(() => {
58 | const loadingMessageIndex = this.contents.findIndex(
59 | (content) => content.loading
60 | );
61 | if (loadingMessageIndex !== -1) {
62 | this.contents.splice(loadingMessageIndex, 1);
63 | }
64 | })
65 | )
66 | .subscribe((content) => {
67 | this.contents.push(content);
68 | });
69 | }
70 |
71 | }
72 |
--------------------------------------------------------------------------------
/client/src/app/vision/vision.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | height: 100%;
3 | display: flex;
4 | flex-direction: column;
5 | }
6 |
7 | .chat-input {
8 | padding-top: 20px;
9 | width: calc(100% - 48px);
10 | }
11 |
12 | .user {
13 | background-color: white;
14 | }
15 |
16 | .chatbot {
17 | background-color: #e8eaf6;
18 | }
19 |
20 | .chat-footer-container {
21 | display: flex;
22 | align-items: center;
23 | padding: 0 0 0 10px;
24 | }
25 |
26 | .chat-container {
27 | overflow: auto;
28 | padding: 0 10px 0 10px;
29 | height: 100%;
30 | }
31 |
32 | .chat-message {
33 | display: flex;
34 | align-items: flex-start;
35 | padding: 10px;
36 | margin-top: 10px;
37 | border-radius: 10px;
38 | }
39 |
40 | .avatar {
41 | width: 50px;
42 | height: 50px;
43 | border-radius: 50%;
44 | margin-right: 10px;
45 | }
46 |
47 | .message-details {
48 | flex: 1;
49 | align-self: center;
50 | }
51 |
52 | .username {
53 | font-weight: bold;
54 | color: #333;
55 | }
56 |
57 | .message-content {
58 | margin: 5px 0;
59 | color: #666;
60 | }
61 |
62 | .message-container {
63 | display: flex;
64 | justify-content: center;
65 | align-items: center;
66 | height: 100%;
67 | }
68 |
69 | .message {
70 | text-align: center;
71 | color: #333;
72 | padding: 20px;
73 | }
74 |
75 | @keyframes fadeIn {
76 | from {
77 | opacity: 0;
78 | }
79 | to {
80 | opacity: 1;
81 | }
82 | }
83 |
84 | .loading {
85 | font-size: 30px;
86 | animation: fadeIn 1s ease-in-out infinite;
87 | }
88 |
89 | .example-container {
90 | width: auto;
91 | height: 100%;
92 | border: 1px solid rgba(0, 0, 0, 0.5);
93 | }
94 |
95 | .image-upload-button {
96 | input[type="file"] {
97 | font-size: 100px;
98 | left: 0;
99 | opacity: 0;
100 | position: absolute;
101 | top: 0;
102 | z-index: 1;
103 | }
104 | }
105 |
106 |
--------------------------------------------------------------------------------
/tools/scripts/publish.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * This is a minimal script to publish your package to "npm".
3 | * This is meant to be used as-is or customize as you see fit.
4 | *
5 | * This script is executed on "dist/path/to/library" as "cwd" by default.
6 | *
7 | * You might need to authenticate with NPM before running this script.
8 | */
9 |
10 | import { execSync } from 'child_process';
11 | import { readFileSync, writeFileSync } from 'fs';
12 |
13 | import devkit from '@nx/devkit';
14 | const { readCachedProjectGraph } = devkit;
15 |
16 | function invariant(condition, message) {
17 | if (!condition) {
18 | console.error(message);
19 | process.exit(1);
20 | }
21 | }
22 |
23 | // Executing publish script: node path/to/publish.mjs {name} --version {version} --tag {tag}
24 | // Default "tag" to "next" so we won't publish the "latest" tag by accident.
25 | const [, , name, version, tag = 'next'] = process.argv;
26 |
27 | // A simple SemVer validation to validate the version
28 | const validVersion = /^\d+\.\d+\.\d+(-\w+\.\d+)?/;
29 | invariant(
30 | version && validVersion.test(version),
31 | `No version provided or version did not match Semantic Versioning, expected: #.#.#-tag.# or #.#.#, got ${version}.`
32 | );
33 |
34 | const graph = readCachedProjectGraph();
35 | const project = graph.nodes[name];
36 |
37 | invariant(
38 | project,
39 | `Could not find project "${name}" in the workspace. Is the project.json configured correctly?`
40 | );
41 |
42 | const outputPath = project.data?.targets?.build?.options?.outputPath;
43 | invariant(
44 | outputPath,
45 | `Could not find "build.options.outputPath" of project "${name}". Is project.json configured correctly?`
46 | );
47 |
48 | process.chdir(outputPath);
49 |
50 | // Updating the version in "package.json" before publishing
51 | try {
52 | const json = JSON.parse(readFileSync(`package.json`).toString());
53 | json.version = version;
54 | writeFileSync(`package.json`, JSON.stringify(json, null, 2));
55 | } catch (e) {
56 | console.error(`Error reading package.json file from library build output.`);
57 | }
58 |
59 | // Execute "npm publish" to publish
60 | execSync(`npm publish --access public --tag ${tag}`);
61 |
--------------------------------------------------------------------------------
/client/project.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "client",
3 | "$schema": "../node_modules/nx/schemas/project-schema.json",
4 | "projectType": "application",
5 | "prefix": "corp",
6 | "sourceRoot": "client/src",
7 | "tags": [],
8 | "targets": {
9 | "build": {
10 | "executor": "@angular-devkit/build-angular:application",
11 | "outputs": [
12 | "{options.outputPath}"
13 | ],
14 | "options": {
15 | "outputPath": "dist/client",
16 | "index": "client/src/index.html",
17 | "browser": "client/src/main.ts",
18 | "polyfills": [
19 | "zone.js"
20 | ],
21 | "tsConfig": "client/tsconfig.app.json",
22 | "inlineStyleLanguage": "scss",
23 | "assets": [
24 | "client/src/favicon.ico",
25 | "client/src/assets"
26 | ],
27 | "styles": [
28 | "@angular/material/prebuilt-themes/indigo-pink.css",
29 | "client/src/styles.scss"
30 | ],
31 | "scripts": []
32 | },
33 | "configurations": {
34 | "production": {
35 | "budgets": [
36 | {
37 | "type": "initial",
38 | "maximumWarning": "500kb",
39 | "maximumError": "1mb"
40 | },
41 | {
42 | "type": "anyComponentStyle",
43 | "maximumWarning": "2kb",
44 | "maximumError": "4kb"
45 | }
46 | ],
47 | "outputHashing": "all"
48 | },
49 | "development": {
50 | "optimization": false,
51 | "extractLicenses": false,
52 | "sourceMap": true
53 | }
54 | },
55 | "defaultConfiguration": "production"
56 | },
57 | "serve": {
58 | "executor": "@angular-devkit/build-angular:dev-server",
59 | "configurations": {
60 | "production": {
61 | "buildTarget": "client:build:production"
62 | },
63 | "development": {
64 | "buildTarget": "client:build:development"
65 | }
66 | },
67 | "defaultConfiguration": "development"
68 | },
69 | "extract-i18n": {
70 | "executor": "@angular-devkit/build-angular:extract-i18n",
71 | "options": {
72 | "buildTarget": "client:build"
73 | }
74 | }
75 | }
76 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@gemini-angular-nestjs/source",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "scripts": {},
6 | "private": true,
7 | "devDependencies": {
8 | "@angular-devkit/build-angular": "~17.1.0",
9 | "@angular-devkit/core": "~17.1.0",
10 | "@angular-devkit/schematics": "~17.1.0",
11 | "@angular-eslint/eslint-plugin": "~17.0.0",
12 | "@angular-eslint/eslint-plugin-template": "~17.0.0",
13 | "@angular-eslint/template-parser": "~17.0.0",
14 | "@angular/cli": "~17.1.0",
15 | "@angular/compiler-cli": "~17.1.0",
16 | "@angular/language-service": "~17.1.0",
17 | "@nestjs/schematics": "^10.0.1",
18 | "@nestjs/testing": "^10.0.2",
19 | "@nx/angular": "^18.0.5",
20 | "@nx/eslint": "18.0.5",
21 | "@nx/eslint-plugin": "18.0.5",
22 | "@nx/jest": "18.0.5",
23 | "@nx/js": "18.0.5",
24 | "@nx/nest": "^18.0.5",
25 | "@nx/node": "18.0.5",
26 | "@nx/web": "18.0.5",
27 | "@nx/webpack": "18.0.5",
28 | "@nx/workspace": "18.0.5",
29 | "@schematics/angular": "~17.1.0",
30 | "@swc-node/register": "~1.8.0",
31 | "@swc/core": "~1.3.85",
32 | "@swc/helpers": "~0.5.2",
33 | "@types/jest": "^29.4.0",
34 | "@types/multer": "^1.4.11",
35 | "@types/node": "18.16.9",
36 | "@typescript-eslint/eslint-plugin": "^6.13.2",
37 | "@typescript-eslint/parser": "^6.13.2",
38 | "eslint": "~8.48.0",
39 | "eslint-config-prettier": "^9.0.0",
40 | "jest": "^29.4.1",
41 | "jest-environment-jsdom": "^29.4.1",
42 | "jest-environment-node": "^29.4.1",
43 | "jest-preset-angular": "~13.1.4",
44 | "jsonc-eslint-parser": "^2.1.0",
45 | "nx": "18.0.5",
46 | "prettier": "^2.6.2",
47 | "ts-jest": "^29.1.0",
48 | "ts-node": "10.9.1",
49 | "typescript": "~5.3.2",
50 | "verdaccio": "^5.0.4",
51 | "webpack-cli": "^5.1.4"
52 | },
53 | "dependencies": {
54 | "@angular/animations": "~17.1.0",
55 | "@angular/cdk": "^17.2.1",
56 | "@angular/common": "~17.1.0",
57 | "@angular/compiler": "~17.1.0",
58 | "@angular/core": "~17.1.0",
59 | "@angular/forms": "~17.1.0",
60 | "@angular/material": "^17.2.1",
61 | "@angular/platform-browser": "~17.1.0",
62 | "@angular/platform-browser-dynamic": "~17.1.0",
63 | "@angular/router": "~17.1.0",
64 | "@google/generative-ai": "^0.2.1",
65 | "@nestjs/common": "^10.0.2",
66 | "@nestjs/config": "^3.2.0",
67 | "@nestjs/core": "^10.0.2",
68 | "@nestjs/platform-express": "^10.0.2",
69 | "dotenv": "16.4.5",
70 | "marked": "~9.1.6",
71 | "ngx-markdown": "~17.1.1",
72 | "reflect-metadata": "^0.1.13",
73 | "rxjs": "~7.8.0",
74 | "tslib": "^2.3.0",
75 | "zone.js": "~0.14.3"
76 | },
77 | "nx": {
78 | "includedScripts": []
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/client/src/app/vision/vision.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule } from '@angular/forms';
4 |
5 | import { MatIconModule } from '@angular/material/icon';
6 | import { MatInputModule } from '@angular/material/input';
7 | import { MatButtonModule } from '@angular/material/button';
8 | import { MatFormFieldModule } from '@angular/material/form-field';
9 |
10 | import { GeminiService } from '../gemini.service';
11 | import { LineBreakPipe } from '../line-break.pipe';
12 | import { EMPTY, catchError, finalize } from 'rxjs';
13 | import { ClientChatContent } from '../client-chat-content';
14 |
15 | type ImageFile = { preview: string; file: File };
16 |
17 | @Component({
18 | selector: 'corp-vision',
19 | standalone: true,
20 | imports: [
21 | CommonModule,
22 | MatIconModule,
23 | MatInputModule,
24 | MatButtonModule,
25 | MatFormFieldModule,
26 | FormsModule,
27 | LineBreakPipe,
28 | ],
29 | templateUrl: './vision.component.html',
30 | styleUrl: './vision.component.scss',
31 | })
32 | export class VisionComponent {
33 | message = '';
34 | contents: ClientChatContent[] = [];
35 | imageFile: ImageFile | undefined;
36 |
37 | constructor(private geminiService: GeminiService) {}
38 |
39 | sendMessage(message: string): void {
40 | if(!this.imageFile) {
41 | return;
42 | }
43 |
44 | const chatContent: ClientChatContent = {
45 | agent: 'user',
46 | message,
47 | imagePreview: this.imageFile?.preview
48 | };
49 | const file = this.imageFile.file;
50 |
51 | this.contents.push(chatContent);
52 | this.contents.push({
53 | agent: 'chatbot',
54 | message: '...',
55 | loading: true,
56 | });
57 |
58 | this.message = '';
59 | this.imageFile = undefined;
60 |
61 | this.geminiService
62 | .vision(chatContent.message, file)
63 | .pipe(
64 | catchError(() => {
65 | return EMPTY;
66 | }),
67 | finalize(() => {
68 | const loadingMessageIndex = this.contents.findIndex(
69 | (content) => content.loading
70 | );
71 | if (loadingMessageIndex !== -1) {
72 | this.contents.splice(loadingMessageIndex, 1);
73 | }
74 | })
75 | )
76 | .subscribe((content) => {
77 | this.contents.push(content);
78 | });
79 | }
80 |
81 | selectImage(event: Event) {
82 | const inputElement = event.target as HTMLInputElement;
83 | const file = inputElement.files?.item(0);
84 | if (file) {
85 | const reader = new FileReader();
86 | reader.onload = (e: ProgressEvent
28 | ![Image Preview]()
29 |
32 |
33 |
40 |
41 |
45 | 
4 | 
7 | 
15 |
16 | ## Blog Posts
17 |
18 | 1. [https://luixaviles.com/2024/03/build-gemini-chatbot-with-angular-and-nestjs/](https://luixaviles.com/2024/03/build-gemini-chatbot-with-angular-and-nestjs/). Start a project from scratch and generate an Nx-based workspace using Angular and NestJS. The web application support a multi-turn conversation(chatbot) and text generation using Gemini models.
19 |
20 | 1. [https://luixaviles.com/2024/03/using-gemini-pro-vision-image-processing-using-angular-nestjs/](https://luixaviles.com/2024/03/using-gemini-pro-vision-image-processing-using-angular-nestjs/). Add the Image processing ability to the existing application. It uses the Gemini Pro Vision Model.
21 |
22 | ## Features
23 |
24 | This project currently supports:
25 |
26 | - Multi-turn conversations (Chatbot application)
27 | - Text Generation
28 | - Image Processing
29 |
30 | 
31 |
32 | ## Support this project
33 | - Star GitHub repository :star:
34 | - Create pull requests, submit bugs or suggest new features
35 | - Follow updates on [Twitter](https://twitter.com/luixaviles) or [Github](https://github.com/luixaviles)
36 |
37 | ## Running the Project Locally
38 | First, ensure you have the following installed:
39 |
40 | 1. NodeJS - Download and Install latest version of Node: [NodeJS](https://nodejs.org)
41 | 2. Git - Download and Install [Git](https://git-scm.com)
42 |
43 | After that, use `Git bash` to run all commands if you are on Windows platform.
44 |
45 | ### Clone repository
46 | In order to start the project use:
47 |
48 | ```bash
49 | $ git clone https://github.com/luixaviles/gemini-angular-nestjs.git
50 | $ cd gemini-angular-nestjs
51 | ```
52 | ### Get an API Key from Google AI Studio
53 |
54 | Go to the [Google AI Studio](https://aistudio.google.com/app/) website and generate an API Key.
55 |
56 | Next, create an `.env` file under the `/server` directory with the API key value you generated(You'll find a `.env.example` file as an example there):
57 |
58 | ```txt
59 | API_KEY=
430 |
903 | `,
904 | styles: [],
905 | encapsulation: ViewEncapsulation.None,
906 | })
907 | export class NxWelcomeComponent {}
908 |
--------------------------------------------------------------------------------
431 |
432 |
902 |
433 |
438 |
439 | 434 | Hello there, 435 | Welcome client 👋 436 |
437 |
440 |
472 |
473 |
441 |
459 | 442 | 455 | You're up and running 456 |
457 | What's next? 458 |
460 |
470 |
471 |
474 |
796 |
797 |
475 |
664 | Learning materials
476 | 482 | 495 | 496 | Documentation 497 | Everything is in there 498 | 499 | 512 | 513 | 519 | 532 | 533 | Blog 534 | Changelog, features & events 535 | 536 | 549 | 550 | 556 | 567 | 568 | YouTube channel 569 | Nx Show, talks & tutorials 570 | 571 | 584 | 585 | 591 | 604 | 605 | Interactive tutorials 606 | Create an app, step-by-step 607 | 608 | 621 | 622 | 628 | 645 | 646 | Video courses 647 | Nx custom courses 648 | 649 | 662 | 663 |
665 |
671 |
682 |
683 | Install Nx Console for VSCode
684 | The official VSCode extension for Nx.
685 |
686 |
687 |
693 |
727 |
728 | Install Nx Console for JetBrains
729 | Available for WebStorm, Intellij IDEA Ultimate and
731 | more!
733 |
734 |
735 |
795 |
736 |
772 |
779 |
789 |
790 | Nx is open source
791 | Love Nx? Give us a star!
792 |
793 |
794 |
737 |
754 |
759 | 755 | Nx Cloud 756 | Enable faster CI & better DX 757 |
758 |760 | You can activate distributed tasks executions and caching by 761 | running: 762 |
763 |nx connect764 | 769 | What is Nx Cloud? 770 | 771 |
798 |
885 | Next steps
799 |Here are some things you can do with Nx:
800 |
801 |
822 | 802 | 815 | Add UI library 816 |
817 |# Generate UI lib 818 | nx g @nx/angular:lib ui 819 | # Add a component 820 | nx g @nx/angular:component ui/src/lib/button821 |
823 |
841 | 824 | 837 | View project details 838 |
839 |nx show project client --web840 |
842 |
860 | 843 | 856 | View interactive project graph 857 |
858 |nx graph859 |
861 |
884 | 862 | 875 | Run affected commands 876 |
877 |# see what's been affected by changes 878 | nx affected:graph 879 | # run tests for current changes 880 | nx affected:test 881 | # run e2e tests for current changes 882 | nx affected:e2e883 |
886 | Carefully crafted with 887 | 900 |
901 |