Loading
Conversation 14 exercises
lesson

Use the Editor Component to Work with Text

Next we'll create a Novella script by duplicating the Continue Adventure script.

The goal of this script is to create a novella from an AI conversation.

Configure Globby to Search Files

Import globby with the other imports for the file:


let { globby } = await import("globb

Loading lesson

Transcript

00:00 Let's duplicate our continueAdventure script. We'll call this createNovella. Name it createNovella, and we will create a novella from an AI conversation.

00:13 So now instead of only searching out our AdventureTime directory, let's bring in globby. And I'll just run this script 1 time to install Globby. Hit enter and instead of continuing I'll hit command W to exit. So now Globby is installed and I'll grab Globby off of it. And Globby can create an array of file paths.

00:35 So we don't need story path anymore. We can essentially just create file paths. And Copilot almost got this right, but instead of just AdventureTime I want to search all of the potential script directories that have text files in them. And so we'll take our file paths. We can replace this.

00:53 We don't have to map over file names anymore since this is an array of file paths. That's what globby returns. And The name can be the base name of the file path and the preview, instead of resolving a file path here, we can just pass in the full file path. And just scrolling down to check, yep, this needs to be a file path now.

01:15 And we get a file path out

01:19 of our arg, instead of just the name of the file. And if we check this script, now you'll see every text file inside of that temp scripts directory, across all those directories. Let's actually add to our description here. We'll add the path dirname filepath, and that way when we run the script you'll see the folder that each of these files are found in. So now when I search for keyboard you can see that off-screen I continued the keyboard adventure and generated this whole story here.

01:51 So to create a novella from this file path let's get those contents. We no longer need to convert these into messages So we can remove all of that and we can remove all of this and there's no message history anymore. And I'm going to copy and paste in a new prompt. So this prompt is essentially asking it to rewrite the choose your own adventure into a novella. And 1 other trick I'm doing here is I'm going to create a file name instead of just doing dates.

02:22 We'll have the AI create a lowercase dashed file name ending in txt on the first line. So now we can take the contents and push the contents in on init. So that's our new input. And instead of using the chat component, I'm going to use the editor component this time to display this. And we don't need onSubmit anymore, we don't need any of this, we don't need memory or memory, since this is no longer a back-and-forth with the AI.

02:50 And then instead of any chat set message stuff we're gonna say editor.append and just append the token. So we'll get rid of all of this. We'll drop editor append in here in case there's an error. And then we can just get rid of this. And then I'll just clear out all my imports to clean that up a little bit.

03:12 And now the workflow is find all the text files inside of my temp directory, allow me to search them out using grep, and show the previews, and highlight any of the matches, then read in the contents of the file, then on a knit we pass those contents to the chain. The chain will match those contents as the input, send it in up against the prompt. So it does the system message, then the human message is our contents, and then as tokens come in they'll be appended into the editor component. Now the last thing I want to do here is grab the novella off of the editor once it's done. This will just be a giant string.

03:48 We'll grab the file name off of the novella. We'll split the lines and grab the first line and we'll just make sure and trim it. And that should be a dashed lowercase name of the story. Then we'll create a novella path to save our story. We'll just drop this in a temp path and drop in the file name.

04:06 We'll write a file of the novella path and use the novella contents. Then we'll just go ahead and open it inside of our selected editor. So pass in the novella path. So now once you run this I'll search for keyboard. I'll find the 1 that was in continue adventure which has a lot more story to it.

04:26 Once I hit enter the editor will pop open and it'll start writing out the novella based on the choices I made in my continue adventure script. So we'll give this some time to write this out. And now this is done we have the chance to look through this and make any edits. I definitely want to revise my prompt to say avoid showing the options or avoid lists, and run some more tests against that. It looks like the adding dialog worked really well, so we just have to run this a handful of times to make sure we revise our prompt to make these stories exactly how we want them.

04:59 Any changes I make will go ahead and be stored as soon as I hit submit or command s. This will output that string and Then open it in BS code just to give it a final read-through. Based on the file name of K It looks like I messed this up here because I destructured the file name here. That was the same thing as doing 0. So that was just a silly mistake.

05:20 So now it will grab the file name from the first line of this keyboard-adventures.txt. And now we have a novella guided by our choices and our revisions that we can keep to ourselves or share with the world.