Skip to content

Commit 6115855

Browse files
apascal07apascal07
committed
Merge branch 'main' into ap-go-generate
2 parents 80687a7 + 91426ac commit 6115855

File tree

2 files changed

+295
-102
lines changed

2 files changed

+295
-102
lines changed

‎docs/codelabs/codelab-chat-with-a-pdf.md

+123-102
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,118 @@
11
# Chat with a PDF file
22

3-
This codelab shows you how to use Genkit to implement an app that lets you
4-
chat with a PDF file.
3+
You can use Genkit to build an app that lets its user chat with a PDF file.
4+
To do this, follow these steps:
55

6-
## Prerequisites
6+
1. [Set up your project](#setup-project)
7+
1. [Import the required dependencies](#import-dependencies)
8+
1. [Configure Genkit and the default model](#configure-genkit)
9+
1. [Load and parse the PDF file](#load-and-parse)
10+
1. [Set up the prompt](#set-up-the-prompt)
11+
1. [Implement the UI](#implement-the-interface)
12+
1. [Implement the chat loop](#implement-the-chat-loop)
13+
1. [Run the app](#run-the-app)
714

8-
This codelab assumes that you’re familiar with building applications with
9-
Node.js. To complete this codelab, make sure that your development environment
10-
meets the following requirements:
15+
This guide explains how to perform each of these tasks.
1116

12-
- Node.js v20+
13-
- npm
17+
## Dependencies {:#dependencies}
1418

15-
## Create a new project
19+
Before starting work, you should have these dependencies set up:
1620

17-
1. Create a new empty folder.
21+
* [Node.js v20+](https://nodejs.org/en/download)
22+
* [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
23+
24+
## Tasks {:#tasks}
25+
26+
After setting up your dependencies, you can build the
27+
project, itself.
28+
29+
### 1. Set up your project {:#setup-project}
30+
31+
1. Create a directory structure and a file to hold
32+
your source code.
1833

1934
```shell
20-
mkdir chat-with-a-pdf
21-
cd chat-with-a-pdf
35+
$ mkdir -p chat-with-a-pdf/src && \
36+
cd chat-with-a-pdf/src && \
37+
touch index.ts
2238
```
2339

2440
1. Initialize a new TypeScript project.
2541

2642
```shell
27-
npm init -y
43+
$ npm init -y
2844
```
2945

46+
1. Install the pdf-parse module:
3047

31-
## Install Genkit
48+
```shell
49+
$ npm i pdf-parse
50+
```
3251

33-
Install the following Genkit dependencies to use Genkit in your project:
52+
1. Install the following Genkit dependencies to use Genkit in your project:
3453

35-
- `genkit` provides Genkit core capabilities.
36-
- `@genkit-ai/googleai` provides access to the Google AI Gemini models.
54+
```shell
55+
$ npm install genkit @genkit-ai/googleai
56+
```
3757

38-
```shell
39-
npm install genkit @genkit-ai/googleai
40-
```
58+
* `genkit` provides Genkit core capabilities.
59+
* `@genkit-ai/googleai` provides access to the Google AI Gemini models.
4160

42-
## Configure your model API key
61+
      5. Get and configure
62+
your model API key {:#configure-your-model-api-key}
4363

44-
For this guide, we’ll show you how to use the Gemini API, which provides a
45-
generous free-of-charge tier and does not require a credit card to get
46-
started. To use the Gemini API, you'll need an API key. If you don't
47-
already have one, create a key in Google AI Studio.
64+
<ul style="list-style-type:none;">
4865

49-
[Get an API key from Google AI Studio](https://makersuite.google.com/app/apikey)
66+
To use the Gemini API, which this codelab uses, you must first
67+
configure an API key. If you don't already have one,
68+
<a href="https://makersuite.google.com/app/apikey" target="_blank">create a
69+
key</a> in Google AI Studio.
5070
51-
After you’ve created an API key, set the `GOOGLE_GENAI_API_KEY` environment
52-
variable to your key with the following command:
71+
The Gemini API provides a generous free-of-charge tier and does not require a
72+
credit card to get started.
5373
54-
```shell
55-
export GOOGLE_GENAI_API_KEY=<your API key>
56-
```
74+
After creating your API key, set the <code>GOOGLE_GENAI_API_KEY`</code>
75+
environment variable to your key with the following command:
76+
77+
<pre class="prettyprint lang-shell">
78+
$ export GOOGLE_GENAI_API_KEY=&lt;your API key&gt;
79+
</pre>
80+
81+
</ul>
82+
<br>
5783
58-
> **Note:** While this tutorial uses the Gemini API from AI Studio, Genkit
84+
**Note:** Although this tutorial uses the Gemini API from AI Studio, Genkit
5985
supports a wide variety of model providers, including:
60-
> * [Gemini from Vertex AI](https://firebase.google.com/docs/genkit/plugins/vertex-ai#generative_ai_models)
61-
> * Anthropic’s Claude 3 models and Llama 3.1 through the [Vertex AI Model Garden](https://firebase.google.com/docs/genkit/plugins/vertex-ai#anthropic_claude_3_on_vertex_ai_model_garden)
62-
> * Open source models through [Ollama](https://firebase.google.com/docs/genkit/plugins/ollama)
63-
> * [Community-supported providers](https://firebase.google.com/docs/genkit/models#models-supported) such as OpenAI and Cohere.
6486
65-
## Import and initialise Genkit
87+
* [Gemini from Vertex AI](https://firebase.google.com/docs/genkit/plugins/vertex-ai#generative_ai_models).
88+
* Anthropic's Claude 3 models and Llama 3.1 through the
89+
[Vertex AI Model Garden](https://firebase.google.com/docs/genkit/plugins/vertex-ai#anthropic_claude_3_on_vertex_ai_model_garden),
90+
as well as community plugins.
91+
* Open source models through
92+
[Ollama](https://firebase.google.com/docs/genkit/plugins/ollama).
93+
* [Community-supported providers](https://firebase.google.com/docs/genkit/models#models-supported) such as OpenAI and Cohere.
6694

67-
1. Create a new folder `src`, and inside it, a new file `index.ts`. Add the
68-
following lines to import Genkit and the Google AI plugin.
95+
### 2. Import the required dependencies {:#import-dependencies}
96+
97+
In the `index.ts` file that you created, add the
98+
following lines to import the dependencies required for this project:
6999

70100
```typescript
71-
import {gemini15Flash, googleAI} from '@genkit-ai/googleai';
72-
import {genkit} from 'genkit';
101+
import { gemini15Flash, googleAI } from '@genkit-ai/googleai';
102+
import { genkit } from 'genkit';
103+
import pdf from 'pdf-parse';
104+
import fs from 'fs';
105+
import { createInterface } from "node:readline/promises";
73106
```
107+
<ul>
108+
<li>The first two lines import Genkit and the Google AI plugin.</li>
109+
<li>The second two lines are for the pdf parser.</li>
110+
<li>The fifth line is for implementing your UI.</li>
111+
</ul>
112+
113+
### 3. Configure Genkit and the default model {:#configure-genkit}
74114
75-
1. Add the following lines to configure Genkit and set Gemini 1.5 Flash as the
115+
Add the following lines to configure Genkit and set Gemini 1.5 Flash as the
76116
default model.
77117
78118
```typescript
@@ -82,104 +122,85 @@ default model.
82122
});
83123
```
84124
85-
1. Add the main body of your app.
125+
You can then add a skeleton for the code and error-handling.
86126
87127
```typescript
88128
(async () => {
89129
try {
90-
// 1: get command line arguments
91-
// 2: load PDF file
92-
// 3: construct prompt
93-
// 4: start chat
94-
// 5: chat loop
95-
} catch (error) {
96-
console.error("Error parsing PDF or interacting with Genkit:", error);
97-
}
98-
})(); // <-- don't forget the trailing parentheses to call the function!
99-
```
100-
101-
## Load and parse a PDF file
130+
// Step 1: get command line arguments
102131
103-
In this step, you will write code to load and parse a PDF file.
132+
// Step 2: load PDF file
104133
105-
1. Install `pdf-parse`.
134+
// Step 3: construct prompt
106135
107-
```typescript
108-
npm i pdf-parse
109-
```
136+
// Step 4: start chat
110137
111-
1. Import the PDF library into your app.
138+
Step 5: chat loop
112139
113-
```typescript
114-
import pdf from 'pdf-parse';
115-
import fs from 'fs';
140+
} catch (error) {
141+
console.error("Error parsing PDF or interacting with Genkit:", error);
142+
}
143+
})(); // <-- don't forget the trailing parentheses to call the function!
116144
```
145+
### 4. Load and parse the PDF {:#load-and-parse}
117146
118-
1. Read the PDF filename that was passed in from the command line.
147+
1. Under Step 1, add code to read the PDF filename that was passed
148+
in from the command line.
119149
120150
```typescript
121-
// 1: get command line arguments
122151
const filename = process.argv[2];
123152
if (!filename) {
124153
console.error("Please provide a filename as a command line argument.");
125154
process.exit(1);
126155
}
127156
```
128157
129-
1. Load the contents of the PDF file.
158+
1. Under Step 2, add code to load the contents of the PDF file.
130159
131160
```typescript
132-
// 2: load PDF file
133161
let dataBuffer = fs.readFileSync(filename);
134162
const { text } = await pdf(dataBuffer);
135163
```
136164
137-
## Set up the prompt
138-
139-
Follow these steps to set up the prompt.
165+
### 5. Set up the prompt {:#set-up-the-prompt}
140166
141-
1. Allow the user to provide a custom prompt via the command line. If they don’t
142-
provide a prompt, use a default.
167+
Under Step 3, add code to set up the prompt:
143168
144169
```typescript
145-
const prefix = process.argv[3] || "Answer the user's questions about the contents of this PDF file.";
146-
```
147-
148-
1. Inject the prompt prefix and the full text of the PDF file into the prompt for
149-
the model.
150-
151-
```typescript
152-
const prompt = `
153-
${prefix}
154-
Context:
155-
${data.text}
170+
const prefix = process.argv[3] || "Sample prompt: Answer the user's questions about the contents of this PDF file.";
171+
const prompt = `
172+
${prefix}
173+
Context:
174+
${text}
156175
`
157176
```
158177
159-
## Implement the chat loop
178+
* The first `const` declaration defines a default prompt if the user doesn't
179+
pass in one of their own from the command line.
180+
* The second `const` declaration interpolates the prompt prefix and the full
181+
text of the PDF file into the prompt for the model.
160182
161-
1. Start the chat with the model by calling the `chat` method, passing the prompt
162-
(which includes the full text of the PDF file).
183+
### 6. Implement the UI {:#implement-the-interface}
163184
164-
```typescript
165-
const chat = ai.chat({ system: prompt })
166-
```
167-
168-
1. Import `createInterface`; this will allow you to build a text-based UI.
185+
Under Step 4, add the following code to start the chat and
186+
implement the UI:
169187
170188
```typescript
171-
import {createInterface} from "node:readline/promises";
189+
const chat = ai.chat({ system: prompt })
190+
const readline = createInterface(process.stdin, process.stdout);
191+
console.log("You're chatting with Gemini. Ctrl-C to quit.\n");
172192
```
173193
174-
1. Instantiate a text input, then display a message to the user.
194+
The first `const` declaration starts the chat with the model by
195+
calling the `chat` method, passing the prompt (which includes
196+
the full text of the PDF file). The rest of the code instantiates
197+
a text input, then displays a message to the user.
175198
176-
```typescript
177-
const readline = createInterface(process.stdin, process.stdout);
178-
console.log("You're chatting with Gemini. Ctrl-C to quit.\n");
179-
```
199+
### 7. Implement the chat loop {:#implement-the-chat-loop}
180200
181-
1. Read the user’s input, then send it to the model using `chat.send`. This part
182-
of the app will loop until the user presses _CTRL + C_.
201+
Under Step 5, add code to receive user input and
202+
send that input to the model using `chat.send`. This part
203+
of the app loops until the user presses _CTRL + C_.
183204
184205
```typescript
185206
while (true) {
@@ -189,9 +210,9 @@ of the app will loop until the user presses _CTRL + C_.
189210
}
190211
```
191212
192-
## Run the app
213+
### 8. Run the app {:#run-the-app}
193214
194-
You can now run the app from your terminal. Open the terminal in the root
215+
Run the app from your terminal. Open the terminal in the root
195216
folder of your project, then run the following command:
196217
197218
```typescript

0 commit comments

Comments
 (0)