Imagine a book that could teach you anything you desire while also being fun to read. That's what I want to bring to life in this video. You see, the idea for the smartest book of all time is actually hidden inside of a sci-fi novel

written nearly 30 years ago back in 1995, and it could already generate infinite stories with images and narration all in real time, while inserting you as the main character. Let's say I was learning Python; it could help me learn data structures in a fun and easy way where

the keys could be my friends and the functions are how they interact. My daily life back in 1995, a techbook like this would have seemed all but magic, much in the way that ChatGPT seems impossible today. The first thing I wanted was a

device that really makes the Illustrated Primer look good, and I came across this one on Amazon. Cold Books, an E-Ink tablet, it seems just about perfect except for the price, but I think it should be fine, so I decided to order it. Now, this will take about a month to arrive, with the

easy and fun part done, I guess now it's time to start building this project. When creating any sort of project, the first thing I want to do is usually jump on my iPad and start brainstorming all the different types of elements it'll need. So, for the Illustrated Primer, it's

composed of a number of things. The main one is an artificial intelligence, an AI that takes in stories and prompts and outputs stories of its own. To stay true to the source material, I need these stories to also give narratives as well as visuals and text. With this brainstorm

done I've done a little bit of a flowchart so I I have a better idea of exactly how the flow of the actual application will work once it's complete I'll have a number of stories inside of a database then I'll store these as

vectors letting me search them and perform RAG to create outputs in text, audio, and images using OpenAI, ElevenLabs, and Midjourney. All of which are received as a single output. Seems simple enough in theory anyway. Next I want to design what the pages will look like.

This is just a rough prototype, however. I find this usually helps me in later stages of the project when I jump into Figma and I turn these rough sketches into actual user interface designs. I've created three pages: a welcome page, a page where people can enter their name

and what they're trying to learn, and finally a course page which has all the content, as well as some illustrations and diagrams. And they'll all be generated using AI with completely unique stories tailored to individuals. With another fun part of this process done, it's time to

move on to the next stage, which is turning these rough sketches into a high-fidelity version. Now, for designing, I often like to use Figma. This is one of my favorite designing tools, and I'm going to create a new design file here with a basic frame. Now, the e in tablet

I'm using is around 11 inches, so I'll set the frame to this size and start designing the high-fidelity version of these pages. Visuals are important, and so are fonts, so I want to find a really good font for this illustrated primer title. I headed to Google Fonts, but

didn't find anything I particularly liked searching for other websites I found this one just here called the Fonts and what made them unique is that you can actually choose different types of font styles the one that looked best to me were the ones from medieval SLG

Gothic which looked like those traditional type of narrative book styles you see with the large characters at the very start of the book so I decided to pick this one here called Enchanted Land I headed back to Figma and applied the font and it looked

pretty good next I wanted to design the corners of the page with these kinds of artistic styled calligraphy heading back to Google I did some searching for calligraphy for underlines and borders and corners and and I did find some really interesting styling but nothing I

particularly wanted to use yet for this Illustrated primer I also considered adding some borders but I found that the styling didn't particularly look that great so I decided to have empty borders here's the SVG that I ended up picking it looks quite artistic and I added a

similar style to the underline here as well I'll create a simple call to action to get started here with this button and I'll also have an image below similar to the mockup I did where there's a person reading and maybe something like a library in the background to generate

this image I'm going to use Midjourney it's one of my favorite sites for creating artwork I gave it the easy task of generating The Illustrated Primer and it came up with these sorts of visuals I probably generated about a 100 images but the one I really liked was this one

just over here using this as the base I created a number of different variations until I came across one that just about fit the style that I wanted to add to the front page of the Illustrated primer I saved it and pasted it into my figment design and since I know that the

primer is currently going to be on an e-ink tablet I decided to change the visuals to be simply black and white by turning off the saturation and then increasing the contrast and some of the lighter and darker colors while also adding a bit of a gradient in from the

left and right hand side so it feels like fading into white which makes it look a lot better rather than it just taking up all of the foreground with that done I'm pretty happy to move on to the second page which is where people will select exactly what they want to

learn as well as entering some information about themselves such as their name I wanted this page to look familiar to the original landing page but also to feel like you're beginning on a journey I used midjourney to generate the image and create a just some square simple inputs the next page

is the most important it's the prim page where the learning takes place I wanted this to be visually stimulating I use a very large artwork for this Python tutorial as an example with lots of text and examples that are visually represented as well to summarize these are the four pages I put together and I

think this should work for the design aesthetic the very first one is this one over here which is just the landing page of people we view then the login slash access page where people enter their prompts the education page and maybe one more page where people can view some of

the other examples people have put in and good timing because I just received a message that the tablet has arrived at the post office since it isn't very far away what I'll do is just go and pick it up right now I am pretty excited because

now that I've got the Figma designs done I could probably immediately test them out on the device additionally I really enjoy reading generally so if this also is something that I can use as a Kindle or maybe even to read manga that'll be really cool what I wasn't

expecting is just how light and fun this device was unlike a Kindle which is kind of locked down this one actually has a full-on Android system running which means I can download apps from the Play Store so what I did was load up Figma as

an app and I'm going to load up the prototype design that I've created and here is the design prototype it looks exactly how I imagined in my mind now I want to replicate these on an actual front end by coding out the HTML and CSS

and building out a back end with an API and a database for the front end I did some research and noticed a lot of people talking about how Next.js has just released their newest version version 15 I thought I would give it a try for this

project since it comes with a few new features such as working with React 19 having Next Forms and Turbo Pack installing it is still as easy as always copying npx create-next-app I'm going to run this up in my terminal and create a

new application personally I don't change any of the defaults I kind of like the new app router and have never had any issues with it as well as the fact that Tailwind CSS already comes baked in everything is more or less exactly how I need it I also want to

prepare a backend a database and an AI model for me to use and here's what I'll be using for that it's called Langflow and it essentially is built on top of LangChain it's also the sponsor of today's video and has some really cool

features being built on top of Python allowing you to upload your own data fine-tune it turn it into vectors create variables in your prompts that you can pass through in a visual interface that can be as complex or simple as you need it to be depending on

what you're building right now it's got integrations with pretty much anything you can imagine and just this last year on GitHub it's been growing like wildfire if you haven't given it a start on GitHub yet then by the end of this

video you'll know exactly why it deserves one firstly a little bit about LangChain if you haven't heard about it before a lot of the startups you're seeing built right now on the web are built on top of LangChain and it's

something that is running on Python that you can get up and running right now but it's a little bit complicated requiring you to know a lot of code in order to utilize some of the better features here's LangChain in 60 seconds Lang

chain let you make your custom AI with just a few lines of code There are three main steps First you need embeddings which are chunked You need to store them as vectors and then retrieve them as part of your prompts That's it LangChain makes this process much easier because

all of that code is now turned into a visual IDE which you can modify and customize Under the hood it's still got all that code from LangChain but it just makes it a lot more human readable and accessible for those people building complex programs You can install it

locally and run it up on your machine which is great But if you want to immediately begin using it Data Stacks has also an online beta which allows you to use it straight in the cloud All right let me start using it for this project I'm going to sign in using a

free account because currently it doesn't cost anything and I'm going to log in with my Gmail though you can log in with GitHub too Here I'll be taken to a dashboard where I can create my own type of project board Now I'm going to

start off with a blank flow but there are great examples for creating like a blog writer or a document Q&A or even a memory chatbot Since I created a flowchart of SS earlier on my iPad it's actually quite easy to replicate that here inside of LangFlow What I did was

head over to the left component section here There's pretty much components for anything I need whether it's an input an output a prompt data or using an AI model I'll start off with the file component because I want to upload a massive file where I have a number of

stories for doing some retrieval augmented generation or RAG as it's commonly referred to these days. This file is massive, so I'm going to use a split text helper that is going to chunk it into smaller sections. And now, one of the cool things about LangChain is I literally

connect the two dots here, and my file is automatically being split into chunks now. This is useful because you don't want an AI to load up the entire document but just the relevant parts. So the next thing I'll need to do is store these as

embeddings, and to do this, I'll use the OpenAI embeddings component here. It's going to use the latest text embeddings model from OpenAI, and I'm going to plug this straight into a database. Now, for this database, I'm going to use the same

thing that I'm on right now, which is DataStax Astra DB. It's another benefit of LangChain, since it seamlessly connects, and we're going to connect these dots straight into the ingest data section and the embedding straight into the embeddings model. Now, let me head to

the first component, the file loader. I'm going to load up a text document which I prepared earlier, which has all the details of how I want my AI to operate. Next, the split text component, I can select play to make sure that the file is both loading and splitting into

chunks. When I get the green tick confirmation, I know it's worked. Next, I'll need to connect the OpenAI embeddings model. I've also entered in an OpenAI API key as a global variable, and this has automatically been added here to the embeddings and verified that it

was working the next thing I want to do is connect the database which I haven't created just yet but here in the component I can create a brand new database immediately using Astra DB I'll call the database stories I'll select to use Amazon web services and set the

region to US East 2 since this is a NoSQL database it'll need a collection what I'll do is create a new collection called stories this database and collection is also a vector database so I'll set the dimensions and similarity metric to the same from the

model that I'm using from OpenAI now to test if this whole flow works I'll select play on the last item and hopefully it goes through each one of these components and successfully completes looks like it has but I want to double check this is where I can head

over to Astra DB and see whether or not the data has been populated from my document that I uploaded earlier here in Astra DB I'm going to head to my new database for stories and using the data explorer I'm going to view the data in

my collection on a quick glance it looked like everything has imported successfully I've got all my data in the content section and it's also chunked and then if I have a look on the vectors a vector has been created for each one of these all of this so far was just

some basic preparation since I needed a database and some real data to utilize as part of a flow as I'm building out an API to utilize in my web app so that's what I'm going to do now here inside of Flow I'm going to keep this one flow

which I can use for documents later but I'm going to create a brand new flow and this one's going to have a chat input that a user will prompt and I'm going to connect it to the database to pull out some information for this prompt. I want

to learn Python. This is just a test prompt that I'm going to plug in, but later on I'll have an API that can utilize this. I'll need to retrieve data from Astra DB, so I'll drag in that component up here and attach it to my

chat input. Once again, I'll do this by simply connecting the dots here for the message to the search input for Astra DB, but I will also need to connect the embeddings model, so let me quickly find that and attach it over here as well. For the Astra DB component, I'll

also identify the collection and database I'm using. So for the database, it'll be the stories and the collection will be story. Similar to what I said earlier, I received this data in a Python/data object, so I'll need to parse it to turn it back into plain text. I'll use the

parse data component and connect up the search results to this component. Now that I'm pulling out the context that I need from the database, this is essentially how you perform RAG. Next, I'll need to create a prompt for this prompt. I'm going to have two variables.

I've created one in advance, it's this one just here, and the two variables I want to have are my context and my question. I've already got these two variables ready, I just need to connect them up now. So if I save this section, I've got these two variables as little

dots that I can connect straight into this prompt for the context I'm going to use the RAG context that I pulled from the database and for the question I'm going to use the prompt that is originally created when the user puts in a chat input. Now to send this to an AI, 

I'm going to send it to OpenAI since that's mainly what I'm using right now. So let me find the OpenAI component and drag that into towards the end of this flow. Now for the input, I'm going to use the prompt that I just created, needed 

which pulls in the context as well as the question. And the last thing I'll need is an output, so here I'm just going to search up output and drag the very last component here at the end of this flow and connect it up to my OpenAI 

component, which is the output that the user should receive now that they've gone through the chain. This is simply because OpenAI doesn't give you the outputs as a plain text document, but usually as an adjacent object, and this just cleans it up. Now the moment of truth, 

will this all work? I'll select play on the very last component here and see if all of these work. It's building the project here in the background and once it does it goes through each one of these components, and it seems they're all successful. Here's my output, and you 

can see that it has a text item here which has a story kind of like how I want with the Illustrated Primer. And here we have Emily trying to learn the Magics of Python when she opens up a book and learns about the Code Kingdom where she's going to do her first 

compiler in Python doing a hello world saying hello to the code kingdom Now to access this with an API it's pretty easy I've got a URL just over here that I can use or use the JavaScript API which is just this code here which I'm going to

throw into my Next.js app which lets me integrate it to any application All I'll need really is to generate a token and plug it all in so that's what I'm going to do now To make my job a little easier I'm going to use Cursor it's a VS Code

based code editor that allows you to code but with the use of AI I've loaded up my project here and all I really have to do is open up the chat dialogue and just explain what I want to happen and I must admit this was really fun I spent a

few hours iterating through different types of designs and concepts until I recreated the design in Figma with literally no coding at all just chatting like I would with ChatGPT or any other framework while it did the coding for me in the background This definitely makes

me question what development will look like in the future Next I requested to recreate the Langlow API in my application and I was able to connect it test it and see that everything was working So what I've done is recreated the basic landing page the navigation to

the second page the prompts that a user can input as well as the journey page all connected into Langlow and here is my very own Illustrated Primer It's up and running and I've got it on a browser link and I'm going to publish it on

Next.js, if you guys want to test it out, it generates a really interesting story based on the language or framework that I'm trying to learn. And while the user interface is still pretty simple and based on Markdown, the simplicity makes it quite easy to focus in on what I'm

trying to learn. What I've realized is that it takes a lot of work to put the moving pieces of an AI together. What I'm going to do is share the code to this repo on GitHub in the description below. That way, if you guys are building your

own AI startup and you're trying to implement RAG, you'll see exactly how I did so in terms of LangChain. And if you guys do enjoy their tools, then definitely give them a star on GitHub. And I hope to see you in the next one.

How I Used AI to Bring Sci-Fi’s Smartest Book to Life

I'm Adrian from Australia, a designer and developer who makes websites and apps using platforms like React Native. I'm hoping to share some of the things I've learnt over the years about my career and hobbies for coding, user interface and experience!

Some of the things we will cover will include:
- Development for React, React Native, Javascript, HTML, CSS, etc
- Small changes to improve UI & UX, like the use of colour, positioning and size
- Large changes like websites or apps, like entire re-designs
- Techniques on creating style-guides
- Reviews of existing businesses online presence and tips on improving them

#coding #programming #ui #ux #webdevelopment #development #react #reactnative #design #userexperience #userinterface

Adrian Twarog

가장 스마트한 책을 위한 컨셉과 영감

재미있고 교육적인 책에 대한 아이디어를 영상으로 구현했습니다.

1995년 공상과학 소설에서 영감을 받아 실시간으로 이미지와 내레이션으로 무한한 스토리를 생성할 수 있습니다.

이 책으로 친구를 키로, 함수를 상호작용으로 사용하여 파이썬을 배우는 예제입니다.

프로젝트용 전자 잉크 태블릿을 구입합니다.

AI, 내러티브, 시각적 요소, 텍스트 등 애플리케이션의 요소를 브레인스토밍하고 순서도를 작성합니다.

텍스트, 오디오, 이미지 생성을 위해 OpenAI, ElevenLabs, Midjourney를 활용합니다.

환영, 학습 입력, 코스 콘텐츠 페이지의 세 가지 페이지로 디자인합니다.

시각적 요소와 글꼴을 고려하여 Figma를 사용한 완성도 높은 디자인.

Google 글꼴 및 기타 웹사이트에서 글꼴을 선택하여 중세 스타일의 글꼴을 선택합니다.

SVG를 사용하여 페이지 모서리, 밑줄 및 테두리를 디자인합니다.

Midjourney를 사용하여 이미지 생성, 변형 생성 및 전자 잉크 디스플레이에 맞게 조정합니다.

태블릿 도착 및 Figma 디자인 테스트.

태블릿의 Android 시스템과 Figma 앱을 사용하여 프로토타입을 제작합니다.

Next.js, HTML, CSS를 사용한 프런트엔드 개발.

LangChain을 활용한 Langflow를 통한 백엔드 개발.

랭플로우와 랭체인에 대한 소개와 설명입니다.

파일 업로드, 텍스트 분할, 임베딩 생성, 데이터베이스 사용 등 데이터 준비에 Langflow를 사용합니다.

채팅 입력을 위해 Langflow에서 새 플로우를 만들고, 데이터베이스에 연결하고, RAG를 사용합니다.

Langflow API를 Next.js 앱에 통합합니다.

기능을 소개하는 일러스트 입문서가 완성되었습니다.

AI 구성 요소를 통합하는 데 따르는 어려움과 노력에 대해 논의합니다.