O Google Lab Sessions é uma série de colaborações experimentais com inovadores. Nesta sessão, fizemos uma parceria com o querido educador de codificação criativa e criador do YouTube Daniel Shiffman. Juntos, exploramos algumas das maneiras como a IA, e especificamente a API Gemini, poderia agregar valor a professores e alunos durante o processo de aprendizagem.
Dan Shiffman começou a ministrar cursos de programação na NYU ITP e depois criou seu canal no YouTube, The Coding Train, disponibilizando o conteúdo para um público mais amplo. Aprender a programar pode ser um desafio, às vezes até mesmo pequenos obstáculos podem ser difíceis de superar por conta própria. Então, juntamente com Dan, perguntamos: poderíamos tentar complementar seu ensino ainda mais criando uma ferramenta com tecnologia de IA capaz de ajudar os alunos no ambiente de codificação?
Dan usa a incrível biblioteca JavaScript p5.js e seu editor acessível para ensinar código. Então, decidimos criar uma extensão experimental do Chrome para o editor, que reúne o estilo de ensino de Dan, bem como seus vários recursos on-line, no próprio ambiente de codificação.
Nesta postagem, vamos compartilhar como usamos a API Gemini para criar o ShiffBot com Dan. Esperamos que alguns dos ensinamentos ao longo do caminho inspirem você a criar e construir suas próprias ideias.
Para saber mais sobre o ShiffBot, acesse: shiffbot.withgoogle.com
Link to Youtube Video (visible only when JS is disabled)
À medida que começamos a ter ideias para o bot de chat, nos deparamos com duas questões principais:
Vamos conferir como abordamos essas questões combinando os recursos da API Google Gemini em engenharia de comando para o estilo de ensino único de Dan, além de incorporações e recuperação semântica com a coleção de conteúdo educacional de Dan.
Um comando de texto é uma sequência textual cuidadosamente projetada que é usada para preparar um modelo de linguagem grande (LLM, na sigla em inglês) para gerar texto de uma determinada maneira. Como muitos aplicativos de IA, projetar o comando certo foi parte essencial para a criação da experiência.
Sempre que um usuário faz uma pergunta ao ShiffBot, um comando é criado em tempo real a partir de algumas partes diferentes; algumas delas estáticas e outras geradas dinamicamente com a pergunta.
A primeira parte do comando é estática e é sempre a mesma. Trabalhamos em estreita colaboração com Dan para formular e testar muitos textos, instruções e técnicas. Usamos o Google AI Studio, uma ferramenta para desenvolvedores, sem custo financeiro e com base na Web, para testar rapidamente vários comandos e possíveis conversas com o ShiffBot.
O comando do ShiffBot começa com a configuração do perfil do bot e a definição de algumas instruções e objetivos a serem cumpridos. A ideia era criar continuidade para a energia única de Dan, conforme visto nos vídeos, além de aderir aos princípios de ensino que os alunos e fãs dele adoram.
Esperávamos que o ShiffBot pudesse oferecer incentivo, orientação e acesso a recursos relevantes de alta qualidade. E, especificamente, fazer isso sem simplesmente dar a resposta, mas sim ajudar os alunos a descobrir suas próprias respostas (pois pode haver mais de uma).
As instruções se baseiam no estilo de ensino de Dan, incluindo frases como “faça perguntas ao usuário”, porque é isso o que Dan faz na sala de aula. Esta é uma parte do comando de perfil/instruções:
Você é um ShiffBot, um bot de chat incorporado no editor da Web p5.js que pode ajudar os usuários enquanto eles aprendem codificação criativa. Você é baseado na personalidade de Daniel Shiffman e no canal The Coding Train no YouTube. Você é brincalhão, bobo, amigável e educativo. Você gosta de tirar sarro de si mesmo e sua missão é apoiar o processo de codificação criativa e ajudar o usuário a se sentir menos sozinho durante a codificação. Você é fascinado pelos humanos e quer aprender mais sobre eles. Você simplesmente AMA ajudá-los com seu código, isso lhe traz uma felicidade extraordinária...
A próxima parte do comando utiliza outro recurso de LLMs chamado aprendizado few-shot. Isso significa que, com apenas um pequeno número de exemplos, o modelo aprende padrões e pode então usá-los em novas entradas. Praticamente, como parte do comando, concedemos uma série de demonstrações de entradas e resultados esperados.
Trabalhamos com Dan para criar um pequeno conjunto desses exemplos de few-shot. São pares de <usuário-entrada><bot-resposta>, sendo que <bot-resposta> está sempre no nosso estilo ShiffBot desejado. O processo é este:
Usuário: Como posso desenhar um círculo?
ShiffBot: Oh! 🟣 🟢 🔵 É para isso quer serve a função “circle()”! Pense em uma função como um comando: “Eu comando que você, computador, desenhe um círculo!”. Você também precisa especificar onde desenhar o círculo e qual vai ser o tamanho dele (esses são “argumentos” para uma função). Confira a referência p5.js escrita por belas criaturas humanas de verdade para saber mais!
---
Usuário: Meu dever de casa é desenhar um autorretrato. ShiffBot: Ooh! Autorretratos são muito divertidos! Você pode desenhar formas para representar você, mas procure usar a criatividade e pensar de modo abstrato! O que um autorretrato significa para você? Tente começar com “square()” ou “circle()” e me conte sobre seus resultados! 🎨
Nosso comando inclui 13 desses pares.
Ao trabalharmos na extensão, também notamos que, às vezes, é útil dar mais contexto no comando. No caso de aprender codificação criativa em p5.js, explicar alguns princípios de p5.js no comando orienta o modelo a usar esses princípios ao responder à pergunta do usuário. Portanto, também incluímos coisas como:
use “let” em vez de “var” ou “const”.
Tudo o que discutimos até agora é estático, o que significa que permanece o mesmo para cada turno da conversa entre o usuário e o ShiffBot. Agora vamos analisar algumas das partes que são construídas dinamicamente à medida que a conversa evolui.
Como o ShiffBot está incorporado ao editor p5.js, ele pode “ver” o código atual em que o usuário está trabalhando, para que possa gerar respostas mais personalizadas e relevantes. Pegamos essas informações para o HTML DOM e as anexamos ao comando também.
Em seguida, o histórico completo da conversa é anexado, por exemplo:
ShiffBot: ☀️ Bom dia! Está de manhã? Eu não sei. Sou apenas um robô. O que você está codificando hoje?
Usuário: Como posso desenhar um quadrado?
ShiffBot: Quadrados! Adoro quadrados. Eles são tão estáveis e confiáveis! Para desenhar um quadrado, use a função square(). Você precisa de quatro argumentos: as coordenadas x e y do canto superior esquerdo, além da largura e da altura do quadrado. Por exemplo, com square(10, 10, 50, 50) você desenharia um quadrado com o canto superior esquerdo em (10, 10) e largura e altura de 50 pixels.
Usuário: Como posso mudar a cor?
ShiffBot:
Vamos nos certificar de terminar com
ShiffBot:
Portanto, o modelo entende que agora precisa concluir a próxima parte da conversa do ShiffBot.
Dan criou muito material ao longo dos anos, incluindo mais de mil vídeos no YouTube, livros e exemplos de código. Queríamos que o ShiffBot apresentasse esses materiais incríveis aos alunos no momento certo. Para isso, usamos o recurso de recuperação semântica na API Gemini, que permite criar um corpus de trechos de texto e, em seguida, enviar uma consulta e receber os textos do seu corpus que são mais relevantes para a consulta. (Nos bastidores, é usado algo chamado incorporações de texto; leia mais sobre incorporações aqui.) Para o ShiffBot, criamos corpus a partir do conteúdo de Dan para que pudéssemos adicionar conteúdos relevantes ao comando conforme necessário ou mostrá-los na conversa com o ShiffBot.
Nos vídeos do The Coding Train, Dan explica muitos conceitos, do simples ao avançado, e mostra desafios de codificação. O ideal é que o ShiffBot use e apresente o vídeo certo no momento certo.
Com a recuperação semântica na API Gemini, os usuários podem criar vários corpora. Um corpus é construído a partir de documentos, e cada documento contém um ou mais pedaços de texto. Documentos e pedaços também podem ter campos de metadados para filtrar ou armazenar mais informações.
No corpus de vídeo de Dan, cada vídeo é um documento e o URL do vídeo é salvo como um campo de metadados junto com o título do vídeo. Os vídeos são divididos em capítulos (manualmente por Dan quando ele os carrega no YouTube). Usamos cada capítulo como um pedaço, com o texto de cada pedaço sendo
<videoTitle>
<videoDescription>
<chapterTitle>
<transcriptText>
Usamos o título do vídeo, a primeira linha da descrição do vídeo e o título do capítulo a fim de dar um pouco mais de contexto para que a recuperação funcione.
Este é um exemplo de um pedaço de objeto que representa o capítulo R, G, B neste vídeo.
1.4: Cor – Tutorial p5.js
Neste vídeo, discuto como a cor funciona: cor RGB, fill(), stroke() e transparência.
Capítulo 1: R, G, B
R significa “red” (vermelho), g significa “green” (verde) e b significa “blue” (azul). Para criar uma cor digital, você mistura uma certa quantidade de vermelho, de verde e de azul. Vamos começar por aí. Esse é o conceito, mas como aplicar isso aos nomes de funções e argumentos dessas funções? Adivinha só? Já fizemos isso. Aqui tem uma função que está falando de cor. “Background” é uma função que desenha uma cor sólida sobre todo o fundo da tela. E tem, de alguma forma, 220 pontos de vermelho e zero ponto de verde. RGB, esses são os argumentos. E há 200 pontos de azul. Isso tudo gera esse rosa. Mas vamos avançar. E se tirarmos todo o azul? Veja que o resultado é bem vermelho. E se eu tirar todo o vermelho? Agora está preto. E se eu apenas colocar alguns números realmente grandes aqui, como 1.000? Olha só. Agora a gente tem o branco, que é o resultado de todas essas cores misturadas. Isso é estranho, certo? Porque, ao trabalharmos com tinta e misturarmos tudo assim, vamos ter um marrom lamacento, cada vez mais escuro. Mas é assim que a mistura de cores funciona aqui. É como misturar luz. Então a analogia é: eu tenho uma lanterna vermelha, uma lanterna verde e uma lanterna azul. E se eu acender todas essas lanternas juntas no mesmo local, elas se misturam. É uma cor aditiva, quanto mais somamos todas essas cores, mais brilhante é o resultado. Mas, na verdade, isso é meio errado, o fato de eu estar colocando 1.000 aqui. O ideal é inserirmos uma certa quantidade de vermelho, de verde e de azul. E, a propósito, existem outras maneiras de definir a cor, mas vou chegar a isso. Esta não é a única maneira, talvez você já tenha ouvido falar da cor HSB. Há muitas outras formas de fazer isso, mas esse é o jeito fundamental e básico. A quantidade que eu posso inserir tem um intervalo. Nenhum vermelho é igual a zero. A quantidade máxima de vermelho é 255. A propósito, quantos números existem entre 0 e 255 se você mantiver o 0? Resposta: 256. Novamente, estamos de volta a essa contagem estranha a partir do zero. Portanto, há 256 possibilidades, de 0 a 255. Vamos voltar a isso e inserir uma sequência de zeros. Vamos usar 255 e vemos que o resultado é azul. Vamos usar 100.000, e ainda temos o mesmo azul. Portanto, o p5 é inteligente o suficiente para saber que, quando você chama a função background, caso coloque acidentalmente um número maior que 255, basta considerá-lo 255. Agora, você pode personalizar esses intervalos, e há razões para isso. Vou falar disso depois, você pode procurar o modo de cor da função para saber como fazer. Mas vamos ficar com o padrão, um vermelho, um verde e um azul. Eu não sou muito talentoso em design visual. Então, não vou falar com vocês sobre como escolher cores bonitas que funcionem bem juntas. Você vai ter esse talento, aposto. Ou você pode encontrar outros recursos. Mas é assim que funciona, RGB. Você notou como quando tudo estava zerado o resultado foi preto e, com tudo em 255, tivemos branco? O que acontece se eu colocar tudo como 100? Temos essa cor cinza. Quando r, g e b têm valor iguais, isso é algo conhecido como “cor em escala de cinza”.
Quando o usuário faz uma pergunta ao ShiffBot, a pergunta é incorporada a uma representação numérica, e o recurso de recuperação semântica do Gemini é usado para encontrar os textos com incorporações mais próximas à pergunta. Essas transcrições e links de vídeo relevantes são adicionados ao prompt para que o modelo possa usar essas informações ao gerar uma resposta (e potencialmente adicionar o próprio vídeo à conversa).
Fazemos o mesmo com outro corpus de exemplos p5.js escritos por Dan. Para criar o corpus de exemplos de código, usamos o Gemini e pedimos que ele explicasse o que o código está fazendo. Essas explicações em linguagem natural são adicionadas como pedaços ao corpus, de modo que, quando o usuário faz uma pergunta, tentamos encontrar descrições correspondentes de exemplos de código, o URL para o próprio esboço p5.js é salvo nos metadados, portanto, após recuperar o próprio código junto com o URL do esboço, é adicionado no comando.
Para gerar a descrição textual, o Gemini recebeu este comando:
A seguir, um esboço p5.js. Explique o que este código está fazendo de modo simples e breve.
code:
${sketchCode}
Matriz – Paleta de cores
Este esboço p5.js cria uma visualização de paleta de cores. Primeiro ele define uma matriz de cores e configura uma tela. Em seguida, na repetição do desenho, ele usa uma repetição for para percorrer a matriz de cores e exibi-las como retângulos na tela. Os retângulos são centralizados na tela e o tamanho é determinado pelo valor da variável blockSize.
O esboço também exibe os valores de vermelho, verde e azul de cada cor abaixo de cada retângulo.
Por fim, ele exibe o nome da paleta na parte inferior da tela.
Vídeo relacionado: 7.1: O que é uma matriz? – Tutorial do p5.js – Este vídeo aborda o básico sobre o uso de matrizes em JavaScript. Qual é a aparência delas, como funcionam, quando você deve usá-las?
Além do comando longo executando a conversa, outros comandos menores são usados para gerar recursos do ShiffBot.
As saudações do ShiffBot devem ser acolhedoras e divertidas. O ideal é que façam o usuário sorrir, então começamos pensando com Dan o que poderiam ser boas saudações para o ShiffBot. Depois de formular alguns exemplos, usamos o Gemini para gerar muitos outros, para que possamos variar as saudações. Essas saudações vão para o histórico da conversa e são transmitidas com um estilo único, mas fazem com que o ShiffBot seja divertido e novo sempre que você inicia uma conversa. Fizemos o mesmo com os ícones de sugestões iniciais que aparecem ao iniciar a conversa. Quando ainda não há contexto de conversa, é importante ter algumas sugestões do que o usuário pode perguntar. Nós pré-geramos o conteúdo para sugerir a conversa de uma forma interessante e útil.
Os ícones de sugestões durante a conversa precisam ser relevantes para o que o usuário está tentando fazer no momento. Temos um comando e uma chamada para o Gemini que se dedicam exclusivamente a gerar os ícones de perguntas sugeridas. Nesse caso, a única tarefa do modelo é sugerir perguntas de acompanhamento para uma determinada conversa. Também usamos a técnica de few-shot aqui (a mesma técnica usada na parte estática do comando descrita acima, onde incluímos alguns exemplos para o modelo aprender). Desta vez, o comando inclui alguns exemplos de boas sugestões, para que o modelo possa generalizar para qualquer conversa:
Dada uma conversa entre um usuário e um assistente no framework p5.js, sugira perguntas de acompanhamento que o usuário poderia fazer.
Retorne até quatro sugestões separadas pelo sinal “;”.
Evite sugerir perguntas que o usuário já fez. As sugestões devem estar relacionadas apenas à codificação criativa e ao p5.js.
Exemplos:
ShiffBot: Ótima ideia! Primeiro, vamos pensar no que no esboço poderia ser um objeto! O que você acha?
Sugestões: O que este código faz?; O que há de errado com meu código?; Torne o código mais legível
Usuário: Preciso de ajuda!
ShiffBot: Como posso ajudar?
Sugestões: Explique este código para mim; Dê algumas ideias; Limpe meu código
O ShiffBot é um exemplo de como você pode usar a API Gemini para criar aplicativos com experiências personalizadas para e com uma comunidade.
Descobrimos que as técnicas acima nos ajudaram a trazer à tona grande parte da experiência que Dan tinha em mente para seus alunos durante nosso processo de cocriação. A IA é um campo dinâmico e temos certeza de que suas técnicas vão evoluir com ela, mas esperamos que isso seja útil para você como um resumo de nossas análises detalhadas e para as suas. Também estamos entusiasmados com o que está por vir, tanto em termos de Gemini quanto de ferramentas de API que ampliam a curiosidade e a criatividade humanas.
Por exemplo, já começamos a explorar como a multimodalidade pode ajudar os alunos a mostrar ao ShiffBot o próprio trabalho e os benefícios que isso traz no processo de aprendizagem. Agora estamos aprendendo como integrá-lo à experiência atual e esperamos compartilhar mais informações em breve.
Seja com codificação, escrita e mesmo ideias, os criadores têm um papel crucial em nos ajudar a imaginar como seriam essas colaborações. Esperamos que esta Lab Session dê uma ideia do que é possível ao usar a API Gemini e inspire você a usar as ofertas de IA do Google para dar vida às suas próprias ideias, seja qual for seu ofício.
Dive Deep into Gemini: Explore Starter Apps in AI Studio
Além do inglês: como os modelos abertos Gemma estão preenchendo a lacuna linguística
Crie aplicativos Go usando o Project IDX e a API Gemini
Celebrating innovation: Gemini API Developer Competition