Mesop으로 빠른 UI 및 자동화된 테스트 구축하기

### Mesop으로 LLM 앱용 빠른 UI 구축하기: 실무 가이드
* 🚀 Mesop은 강력한 프런트엔드 기술이 없는 엔지니어를 대상으로 **Python으로 웹 UI를 빠르게 구축하기 위해 Google 엔지니어가 개발한 새로운 프레임워크**입니다.
* 🛠 Mesop은 **채팅, 텍스트-텍스트, 텍스트-이미지 예시**와 같은 높은 수준의 구성 요소는 물론 보다 맞춤화된 디자인을 위한 낮은 수준의 요소도 제공합니다.
* 📊 이 프레임워크는 현재 **0.8 버전으로 오픈 소스**이며, 사용 편의성과 머신러닝 모델의 빠른 프로토타입 제작에 중점을 두고 있습니다.
* 🤖 Mesop을 LangChain 및 Groq과 통합하여 **메모리 보존 기능**을 갖춘 챗봇을 만드는 실제 예시를 보여드립니다.
* 📱 챗봇 UI는 **Mesop의 구성 요소**를 사용하여 구축되었으며, 백엔드는 **언어 모델 응답을 위해 Groq에서 구동**됩니다.
* 🧠 챗봇은 대화 기록을 유지하며 이전 상호작용을 기반으로 답변을 제공할 수 있어 **메모리 기능**을 시연합니다.
* 🔗 Mesop은 **UI 상태 관리를 처리**할 수 있으므로 광범위한 프런트엔드 지식 없이도 대화형 애플리케이션을 쉽게 개발할 수 있습니다.
* 💬 이 동영상은 사용자 인터페이스를 통해 LLM 애플리케이션을 빠르게 테스트하고 배포할 수 있는 **Mesop의 단순성과 잠재력**을 강조하며 마무리됩니다.

Mesop을 사용하면 엔지니어가 Python으로 웹 UI를 빠르게 구축할 수 있으며, 테스트와 프로토타이핑을 쉽게 할 수 있는 높은 수준의 구성 요소를 제공합니다.

Okay. So one of the biggest challenges
as you're building LLM apps is both testing it yourself and getting it
in the hands of users to get feedback. So I think there are sort of two main
things that you want to think about here. You want to think about building quick
UIs that people can test things in, which I'm going to talk about in this video. And then you also want to think
about automated testing, which perhaps we save for a future video. So the first way of doing this is you
want to basically get your idea, your app, your product, your model into the
hands of end users as quickly as possible. This allows you very quickly to
just get feedback on what people like, what people don't like. Often when you're coding and making
something for the first time, unless you're making it for
yourself, and often even when you are making it for yourself, when you actually start to use it, you
realize that a lot of the assumptions

you had were perhaps totally wrong. So this is where you're looking
for a good, quick framework that can basically allow you to build a
UI quickly to test something out. So up until now, we've had Streamlit. We've had Gradio. And now a group of coders at Google have
released this framework called Mesop. Now Mesop is not an
official Google product. This is basically a product that
a number of the coders have been working on in their 20% time and
probably on their spare time as well. The whole idea of this is to be able
to build web UIs quickly with Python. And really it's aimed at engineers who
don't have a lot of front-end skills. If you think back to Streamlit,
Streamlit has become very popular. Snowflake bought Streamlit
for a lot of money. Early on, Streamlit was actually
used inside of Google, who was one of the sort of early adopters
of Streamlit. Now, my guess is now

that another big company owns it. They probably don't want to
use it as much internally. And also it does seem that Streamlit has
gone in a different direction a little bit since Snowflake acquired them. And then on the other side, you've got
Gradio that was bought by Hugging Face. It makes sense for people inside
Google to want to have their own thing that they can control. And this is where Mesop comes in. Now they've opened source this,
so you can use this straight away. And it's still a bit off
being a version one in here. They've got it to a version 0.8 in here. But let's have a look at it. And then I'll what I'll do is go
through the key elements of it. And then we will also look at building
a chat bot with LangChain, with Groq, with some memory, how you would
actually do this to be able to use this.

Okay. So in their blog posts, they basically talk about why they're doing this, the whole sort of idea that a lot of developers just don't have the front-end skills for doing this. The other thing is they wanted something that is very easy and quick to put together. And I think this is where this becomes really interesting. The whole idea of having something that's already got components that you can just basically use as well as make your sort of own low-level kind of thing in here. So if we come in and have a look at the components that they've got already, we've got really high-level sort of components like this sort of chat ID here where we can basically just type in something. And we can see that it can respond back. Now, how does that actually work? Here's the code for it. You can see there's not a lot of code in there. Basically, you're just setting up a page, etc.

and then you've got a chat implementation,
and you give it a function that will determine what to do with that. We'll look at that in a moment when
we look at the LangChain example. And you should notice that in here, one
of the key things in here is that this is actually building a flask app on the fly. So you've got all these elements
that are basically being built for you in the backend and just giving
you a nice, simple UI at the front. So they've got some
high-level components. So we've got chat, we've
got text-to-text examples. We've got text-image examples. If you want it to make some
kind of image manipulation tool or something like that, you've also then got lower-level
stuff of where you've got boxes you can see if you want to go and
design your own thing a bit more. You've got sidebar navigation.

you've got text, you've got marked down. You've got a whole bunch
of these different things. You've obviously got things like
buttons, text inputs, all these sorts of things that you can use. And on top of this, you've also got
a bunch of demos that they've done. So you can see in here, if we look
at like the LLM playground, we can see that we've got something
now where we can select the model. We can select the region. We can play around with the
temperature. We can do set a whole bunch of different things in here. And we've got a full example
of the code of how to do this. So they've got a number of these different
demos that you can try things out. So if you want it to do build something,
that's text to image, you can just come in here and take that code, reuse it. If you want to build sort of
small elements, you can see exactly

how they're doing that inside
of these bigger demos in here. So I think in many ways, it's
self-explanatory of how you could put these things together. They've got a getting started Colab. Let me just run this through. One of the nice things that you can do in
here is you can run all these in CoLab. So they've got  a very special thing
where you can do sort of me.colab.run. So Mesop is just
basically imported as M E. You've got labs to basically give you
the different components, in here. And you can see that, this will
basically set up the sort of flask server running in the background. And then we can just add pages to this. So we can basically coming here, we
can define a page with a decorator. We give it the name of the page. We just pass in a function for that page. You can see setting up a simple chat
interface it's pretty easy in here

that we can basically just define,
that we're going to have a chat. We're going to basically set up that chat. We're going to have this mel
.chat. So that's basically where we're getting the components, putting that in. The main thing we need to define
for the chat is the function that will handle the inputs from the
UI and do something with it. Now you can see in this case, all that's
going to do is basically just return Hello and then whatever I ask it. So if I ask it, Hi, how are you? You can say, Sure enough,
it just now returns Hello. Hi, how are you in here. Now, we'll look at actually hooking this
up in a second to do some proper things. Overall though, you can set up multiple
pages quite easily and quite quickly and put a bunch of things in them for
when you want to test something out. So this makes it a great way
just to get going, get something

that you can test out quickly. And build a very quick prototype, whether
that's not just in CoLab, but you can run it locally in VSCode, et cetera, and go through it. All right. Let's jump in and have a look at,
hooking this up with LangChain and Groq just to make a simple
chat bot with some memory in here. Okay. So in this example, I'm just going to walk
through how you could set this up with LangChain and with Groq to basically have
a chat that's got memory, that's retaining the memory as it goes through, and that
we could then basically test that out. Okay. I've got some packages
that are brought in here. I brought in the Mesop package. Brought in the LangChain packages. The LangChain Groq. I was going to do something with
Duck Duck Go maybe we will do that in the future for this.

so all right. I basically start off just by getting my Groq API key, and then I'm going to set up the actual Groq chat part in here. So I'm going to basically set up a Groq LLM in here. And then gonna set up a prompt format for what this. Okay. I've got my system prompt that basically says you are a helpful assistant. Please be brief and concise. And to the point, answer in as few words as possible, but still give the user the key input thereafter. Your name is Isabella and you are 28 years old, right? So that's coming from the system prompt here. The model that I'm actually going to use is Llama 3 70 billion on Groq. And then I've got a human input here where are we going to say, use the conversation memory below to help answer the most recent query from the user. So then we're going to pass it in a memory which is going to just be sort of

a list of everything that's been said. And then we're going to
pass it on a user query. And then we're going to
prompt it for getting the assistant message back in here. So all right, once I've got those. I basically just bring those in, into
the chat prompt template from messages. Set up a LangChain
expression language chain. So I've called this conversation chain. You can see now I can basically invoke
this by passing in a text message from the user and then a string, which is going to
be actually I've just changed is now to be a string that's going to be converted from
a list of messages that we've had in here. So if I set up that chain, you can see that we asked
it, How are you today? It then replied, I'm doing great, thanks. And then we've got all of this
other data that we got back. All right now, we don't need all of that.

That's coming back. What we need is that the actual message,
so that the message is going to be under response dot content in there. All right. So next up, we want to
build the actual MOSOP part. So we're going to bring in Mesop as me,
we're going to bring in the components. So Mesop labs as Mel. We're going to run that to just get
that started, and you can see sure enough, it started now a flask server. Now you can see I've been
running it already, but okay. We've got this going. If we were running
this on a local machine, we could just click it and open it up straight away. In Colab, we'll actually run sort
of inline with the cells and stuff. All right. To make our chat is pretty simple. We've got the chat interface. And we need to pass that into a function. So the function is going to be
called transform in this case.

And what it actually passes in is two things. It passes in what the user just pressed submit on. So like the last user query, and it passes in a list of chat messages that it's calling history in here. So unfortunately, you can't simply sort of debug with this in CoLab, but you can see what I'm doing here is I'm going to basically set up a new string because what I want to do is when I pass it into LangChain, I'm not going to pass in a list of chat messages. I'm going to first convert it to a string. So what I'm going to do is basically just say, going through this list of messages in history, for each one, we're just going to add the role and then the content of that. So the role will be user, will be assistant, kind of thing as we go through this. Then what we're going to do is we're going to run the conversation.

chain, which is going to call Groq. We're gonna pass in the
prompt that we got up here. It's going to go in here and then
we're going to pass in that history string that we've just made there, and this is going to give us a
response back, and then really, we just want the response.content. So that's what we'll return
back to the UI for this. Now it will handle the state for this. It will handle the state of, you'll
see now when I run it, it will handle the state of storing the
different chat messages in there. So this is one of the good
things about Mesop is that it can handle the state for you. So you can see if I come in
here and I say, hi there. Sure enough, we get hi. I'm Isabella. Nice to meet you. How can I help you today? Let me try and test it.

All right. So let's say I tell it, Okay, I'm Sam. My favorite color is blue. Let's see if we can get that. Okay. So it says, Nice to meet you, Sam. Blue is a lovely color. What's on your mind today? Okay. Let me ask it something about, Tell me about the company that made you. All right. It's basically I'm an AI assistant. So I don't have a specific company that made me. It's interesting that it's not saying Meta here. I was created through a process of machine learning and natural language processing. All right. Now you can see we've gone past this. So you can see now if I ask it something like, What is my name? it responds. Now, remember we asked for a very succinct answer back. So it's obviously getting that from the memory in the conversation, right? If I ask it, What was my favorite color?

Blue. Okay. So we can see that now we've basically got a chat bot going. We've got this going. Now, if we want to log these out somewhere, we could just add this in here, that you know, here where I'm doing this print part. We could actually just put in something to call another function, to do a logging function, to save it to a database, to do a whole bunch of different things. It's very simple to get something going really quickly. So you can see in just this small amount of code, we've got a UI going for our chat bot that we've got going here. So if we wanted to test out a RAG and we want it to be able to do some things, maybe in the future what I'll look at doing is we could have a chat going where we can actually see the RAG outputs on the side and stuff like that as well. So there's a whole bunch of different ideas that you can do.

with this as you go through them. So hopefully this gives you a
taste of what you could do and how you could get started with this. I'll probably use this to show some
sort of local bots and stuff like that running with Ollama in the future. I do feel this is a nice simple way
that you can get a UI going that you can get something that you can start testing and you could actually then put
this on something that you run in the cloud quite easily as well so
that other people could test it and you could see the results there. All right. Any comments or questions please
put them in the comments below. If you found the video useful
please click like and subscribe. And I will talk to you in the next video. Bye for now.

Mesop - Google's New UI Maker

HI my name is Sam Witteveen, I have worked with Deep Learning for 9 years and with Transformers and LLM for 5+ years.  I was appointed a Google Developer Expert for Machine Learning in 2017 and I currently work on LLMs and and since earlier in 2023 on Autonomous Agents. 

Sam Witteveen

LLM 앱 빌드 및 테스트: 빠른 UI 및 사용자 피드백

LLM 앱을 빌드할 때는 테스트와 사용자 피드백을 받는 데 어려움이 따르는데, 이는 테스트를 위한 빠른 UI를 만들고 자동화된 테스트를 고려함으로써 해결할 수 있습니다.

Google 코더들이 개발한 새로운 프레임워크인 Mesop은 엔지니어가 Python으로 웹 UI를 빠르게 구축할 수 있도록 지원하는 것을 목표로 하며, 특히 Streamlit 및 Gradio와 같은 다른 인기 프레임워크가 인수된 후 제어할 수 있는 도구에 대한 필요성을 채워줍니다.

Mesop은 아직 개발 초기 단계에 있지만, LLM 앱 구축 및 테스트를 위한 오픈 소스 솔루션을 제공하여 빠른 UI 개발과 사용자 피드백 수집을 위한 유망한 옵션을 제공합니다.

쉽고 빠른 프런트엔드 개발에 초점을 맞춘 블로그

이 블로그에서는 개발자의 프런트엔드 기술의 필요성에 대해 논의하고 낮은 수준의 사용자 지정에 미리 빌드된 구성요소를 사용하는 것이 얼마나 쉽고 빠른지를 강조합니다.

채팅 및 텍스트-이미지 변환 예제와 같은 높은 수준의 구성 요소와 보다 개인화된 디자인을 위한 낮은 수준의 요소도 제공합니다.

또한 블로그에서는 모델 및 지역 선택을 위한 LLM 놀이터와 같이 사용자가 탐색하고 재사용할 수 있는 다양한 데모와 함께 코드 예제를 제공합니다.

Mesop, LangChain, Groq으로 간단한 채팅 인터페이스 설정하기

Mesop을 사용하면 플라스크 서버 설정을 포함하여 CoLab에서 구성 요소를 실행할 수 있습니다.

이를 통해 페이지와 채팅 인터페이스를 쉽게 정의하고 UI에서 입력을 처리할 수 있습니다.

이 설정은 LangChain과 Groq을 사용하여 메모리가 있는 채팅 봇의 프로토타입을 빠르게 구축하고 테스트할 수 있는 방법을 제공합니다.

Groq API 키를 얻고 채팅 상호작용을 위해 Groq LLM을 설정합니다.

대화에 라마 3 700억 모델을 사용합니다.

채팅을 위한 Mesop 컴포넌트와 인터페이스를 "transform"이라는 이름으로 빌드합니다.

사용자 상호작용 개선을 위한 LangChain 업데이트

이제 LangChain은 사용자의 마지막 쿼리와 채팅 메시지 히스토리를 Groq에 전달하여 응답을 받습니다.

채팅 메시지 목록을 문자열로 변환함으로써 대화 흐름이 개선됩니다.

채팅 메시지 저장 상태를 처리하는 Mesop의 기능은 사용자 상호 작용과 메모리 리콜을 향상시켜 보다 원활한 경험을 제공합니다.

로깅 기능이 있는 채팅 봇 UI 만들기

이 코드는 채팅 봇 UI를 빠르게 설정하고 대화를 저장하기 위한 로깅 기능을 통합하는 방법을 보여줍니다.

또한 다른 사용자가 테스트할 수 있도록 RAG 출력을 통합하고 클라우드에서 봇을 실행할 수 있는 가능성도 제시합니다.

이 접근 방식은 테스트를 간단하게 시작할 수 있는 방법을 제공하며 더 많은 사람들이 사용할 수 있도록 쉽게 확장할 수 있습니다.