Coisas que eu quero fazer
O artigo abaixo mostra como usar o Gemini com NodeJS.
No entanto, como não possui interface gráfica e é completamente impraticável, implementaremos uma.
análise
O HTML criado da última vez é o seguinte:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gemini</title>
</head>
<body>
<script type="module" src="main.js"></script>
</body>
</html>Da mesma forma, o JavaScript é o seguinte:
let api_key = "Your API key"
import { GoogleGenerativeAI } from "@google/generative-ai";
const genAI = new GoogleGenerativeAI(api_key);
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
const prompt = "GoogleのAIのGeminiに関して教えて。";
const result = await model.generateContent(prompt);
console.log(result.response.text());implementação
Implementação de entrada
Adicione o seguinte à tag HTML para habilitar a entrada de texto.
<div>
<label>INPUT: </label>
<input type="text" id="input" size="100" />
</div>
<div>
<button id="run">Execute</button>
</div>
Em JavaScript, vamos garantir que, ao clicar no botão ‘Executar’ criado acima, uma mensagem seja enviada para a IA.
import { GoogleGenerativeAI } from "@google/generative-ai";
//initialize
const genAI = new GoogleGenerativeAI(api_key);
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
//make rely for button click
async function generateReply(){
const prompt = document.getElementById("input").value;
const result = await model.generateContent(prompt);
console.log(result.response.text());
}
//register callback
document.getElementById("run").onclick = () => generateReply();Implementação de saída
Adicione o seguinte à tag HTML para criar uma área para exibir a saída.
<div id = output>
</div>O JavaScript exibirá a resposta criada acima na área mostrada.
//console.log(result.response.text()); //delete
document.getElementById("output").innerHTML = (result.response.text()); //addSuporte a Markdown
A implementação até agora funciona em um nível básico, mas a saída não está formatada como mostrado abaixo.
Isso ocorre porque a saída está em formato Markdown.
Aqui, usaremos a biblioteca `unified` para convertê-lo em HTML e exibi-lo.
Instalando o Unificado
Execute o seguinte comando para instalar o pacote unificado e os módulos que você utilizará.
npm install unified
npm install remark-parse
npm install remark-rehype
npm install rehype-stringifyConverter de Markdown para HTML
Importe os módulos necessários.
import { unified } from 'unified';
import remarkParse from 'remark-parse'
import remark2rehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify';O seguinte `result.response.text()`, escrito em Markdown, é convertido para HTML usando `processor.processSync`.
const result = await model.generateContent(prompt);
//add start
const processor = unified().use(remarkParse).use(remark2rehype).use(rehypeStringify); //definge process parse markdown → convert to HTM → build
const html = processor.processSync(result.response.text());//convert
//add end
//document.getElementById("output").innerHTML = (result.response.text()); //delete
document.getElementById("output").innerHTML = (html.value);//addResultado
Consegui inserir texto, obter a saída do Gemini e exibi-la.
Todo o código
index.tml
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gemini</title>
</head>
<body>
<div>
<label>INPUT: </label>
<input type="text" id="input" size="100" />
</div>
<div>
<button id="run">実行</button>
</div>
<script type="module" src="main.js"></script>
<br>
<div id = output>
</div>
</body>
</html>main.js
let api_key = "Your API key"
import { GoogleGenerativeAI } from "@google/generative-ai";
import { unified } from 'unified';
import remarkParse from 'remark-parse'
import remark2rehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify';
const genAI = new GoogleGenerativeAI(api_key);
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
async function generateReply(){
const prompt = document.getElementById("input").value;
const result = await model.generateContent(prompt);
const processor = unified().use(remarkParse).use(remark2rehype).use(rehypeStringify);
const html = processor.processSync(result.response.text());
document.getElementById("output").innerHTML = (html.value);
}
document.getElementById("run").onclick = () => generateReply();
Sites que utilizei como referência
コメント