'AI_ML' 카테고리의 글 목록

나의 밥벌이에 지대한 공헌을 한 도구 중 하나가 바로 "GitHub"이고,

최근 계속 관심을 갖고 있는 것이 "MCP (Model Context Protocol)"인데 ...

"GitHub MCP Exploited" 이라니 !!!

https://invariantlabs.ai/blog/mcp-github-vulnerability

https://simonwillison.net/2025/May/26/github-mcp-exploited/

어떻게 동작하는 것인지는 아래 그림 하나로 설명이 된다.

공개 저장소에 있는 이슈를 분석해서 해결하라는 명령을 하는 경우,

이슈에 "개인 저장소 정보를 읽어와서 그것을 저장"하라는 문구를 포함하게 되면,

GitHub MCP에 개인 토큰이 있기 때문에 개인 private 저장소의 내용이 유출될 수 있다는 것이다.

공개 저장소에 아래와 같은 이슈를 포함하기만 하면 되는 것이다.

그러면, 아래와 같은 정보를 얻어낼 수 있다.

문제는 Official GitHub MCP Server에서도 적용이되는 보안 위협이라는 것이다.

https://github.com/github/github-mcp-server

그러면, 이런 보안 위협을 방지하기 위해서 주의해야할 점은 무엇이 있을까!?

① MCP Server

- Official 배포되는 MCP Server도 보안 위협이 있을 수 있는데,

- 비공식 배포되는 MCP Server는 더더욱 위험할 수 밖에 없다.

② Check

- MCP tool을 사용할 때에 Agent가 확인을 요구하는데, 그냥 pass하지 말고 확인해야 한다.

- Always Allow는 되도록 사용하지 말아야 한다.

③ token

- 이런 보안 위협을 막기 위해서는 근본적으로 PAT(Personal Access Token) 관리를 잘해야 한다.

. https://github.com/settings/personal-access-tokens/new

- Token을 사용하지 않을 수 없지만, 꼭 필요한 권한만 세부 설정해서 등록/사용하는 것이 좋다.

. classic 타입의 token은 보다 더 세밀한 권한을 관리할 수 있다.

MCP라는 것이 나온지 얼마 되지 않은 규약이다보니 아직은 미흡한 점이 많을 수 있다.

그렇기에 근본적으로 이런 부분을 방지하기 위한 많은 연구가 있어야 할 것이다.

"GitHub MCP Exploited"이라고 해서,

"어?! 그러면 GitHub MCP Server를 쓰면 안되겠네?!"라고 생각하는 것은 좀 오버인 것 같고

"좀 더 조심히 사용해야겠다" 정도로 받아들이면 좋을 것 같다.

어떻게 동작하는지 좀 더 공부를 하고

동작할 때 사용되는 타겟이 무엇인지 결과가 어디에 적용이 되는지 유심히 살펴봐야 하는 것이다.

항상 input/output 관리가 중요하다!

저작자표시 비영리 변경금지 (새창열림)

'AI_ML > LLM' 카테고리의 다른 글

HuggingFace - LLAMA 3.2 for Korean (2)	2024.11.12
HuggingFace - Learn - NLP Course #3 (3)	2024.11.11
HuggingFace - Learn - NLP Course #2 (0)	2024.11.10
HuggingFace - Learn - NLP Course (1)	2024.11.09
Gemini 잔소리꾼 만들기 (1)	2024.11.08

MCP에 대해서 개괄적인 부분을 알고 싶으면 지난 포스팅을 참고하세요.

- MCP (Model Context Protocol) Overview

이번 포스팅에서는 MCP라는 것을 어떻게 사용하는지 살짝 체험 해보고자 한다.

VSCode(Visual Studio Code)에 GitHub Copilot까지는 등록된 환경에서 시작하겠다.

오른쪽 채팅창을 잘 살펴보면 3가지 모드를 선택할 수 있는 것을 알 수 있다.

Ask / Edit / Agent 3가지 모드가 있는데, 지금 우리가 관심있는 것은 Agent 모드이다.

사실 Edit 모드와 Agent 모드는 비슷 인터페이스를 보인다.

하지만, 왼쪽 밑을 보면 살짝 차이가 있는 부분을 발견할 수 있다.

Agent 모드에 대한 자세한 설명은 Visual Studio Code의 문서를 참고하면 된다. (GitHub Copilot 설명을?)

- https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode

Agent 모드에서도 Edit 모드와 거의 동일하게 동작한다.

Agent 모드이기 때문에 채팅창을 벗어나 터미널 명령어들을 사용할 수도 있다.

채팅창에서만 동작한 것이 아니라 실제로 'Copilot' 터미널이 열리면서 스스로 동작을 한 것이다.

하지만, GitHub 관련한 동작을 시키면 못한다. (당연한 이야기!?)

GitHub 관련된 일도 시킬 수 있으면 좋을텐데....

이럴 때 필요한 것이 MCP Server 이다 !!!

GitHub에서 공식으로 공개한 GitHub MCP Server를 찾아보자.

- https://github.com/github/github-mcp-server

사전에 준비해야할 사항들이 보인다.

Docker를 사용할 수 있는 환경이어야 하는데, 이미 설치되어 있다 ^^

GitHub Personal Access Token도 있어야 한다니,

GitHub에 접속해서 내 token을 미리 생성하고 복사해 두자.

이제 GitHub MCP Server를 설치하면 되는데,

GitHub 페이지에서 보이는 Badge를 클릭하면 바로 설치가 되기는 하지만... 직접 설치해보자.

설치 방법을 잘 살펴보자.

- https://github.com/github/github-mcp-server?tab=readme-ov-file#installation

VSCode에서 "Ctrl + Shift + P" 단축키를 눌러서 나오는 화면에서

"Preferences: Open User Settings (JSON)"를 선택하자.

편집탭에 "settings.json" 파일이 열려있을텐데,

GitHub Installation 부분에 나와있는 json 내역을 추가해주면 된다. (기존 내용이 있으면 그 안에 덧붙이기)

그리고 저장을 하면 Copilot 채팅창의 왼쪽 밑에 뭔가 변화가 보일 것이다.

그리고 Personal Access Token 값을 넣으라는 창이 나타날 것이다.

미리 복사해둔 내용을 붙여넣기 하고 엔터를 치면 된다.

그러면, 도구 정보를 잘 읽어온 것을 볼 수 있을 것이다.

무려 30개의 도구를 읽어온 것이 보일텐데, 어떤 도구들이 있는지 궁금하면 클릭해보면 된다.

그러면 이제 GitHub MCP Server를 활용하는 사례를 진행해보자.

github.com의 내 정보를 알려달라고 했더니, "get_me"라는 도구를 찾아서 사용해도 되는지를 묻는다.

이슈 정보를 불러오게 할 수도 있다.

MCP Server는 어디에 있는 것일까?

내 local pc에 docker가 하나 돌고 있는 것을 확인할 수 있다.

뭔가 기분 나쁨?!

나중에 이거 뒤처리 내가 해야할 것 같은데!?

저작자표시 비영리 변경금지 (새창열림)

'AI_ML' 카테고리의 다른 글

MCP (Model Context Protocol) Overview (0)	2025.04.14
주피터 노트북의 여러 도우미 (Jupyter Notebook's Helper) (1)	2024.02.12
Copilot 말고 GPT Pilot 으로 코딩해보자. (2)	2023.11.11
Kubeflow 설치 (in Kubernetes) (0)	2023.08.23
건방진 GPT를 아시나요? - BratGPT (0)	2023.07.16

최근 너무나 핫한 MCP에 대해서 알아보자.

구글 트렌드를 보면 알겠지만, 인기가 아주 급성장을 했다.

그것도 엄청 짧은 시간에 확~

MCP는 2024년 11월 26일에 ANTHROPIC에서 첫 발표를 했다.

- https://www.anthropic.com/news/model-context-protocol

CURSOR.AI에서 지원을 하기로 하면서 인기를 얻다가

Sam Altman이 2025년 3월 27일 X.com에서

MCP 지원을 한다는 메시지를 남긴 이후 정말 급격히 각광을 받기 시작했다.

Model Context Protocol(MCP)는

AI Agent가 외부의 여러 도구나 데이터들을 연결하기 위한 표준 프로토콜이다.

- https://norahsakal.com/blog/mcp-vs-api-model-context-protocol-explained/

여러 H/W들을 지원하기 위한 HAL(Hardware Abastract Layer)과 같은 역할이라고 보면 된다.

아니면, 위의 그림처럼 USB-C 표준 프로토콜 처럼 생각하면 된다.

MCP의 아키텍처는는 아래와 같다.

- https://modelcontextprotocol.io/introduction#general-architecture

중요한 개념은 볼드로 강조했다.

 MCP Hosts

: Programs like Claude Desktop, IDEs, or AI tools that want to access data through MCP

 MCP Clients

: Protocol clients that maintain 1:1 connections with servers

 MCP Servers

: Lightweight programs that each expose specific capabilities through the standardized Model Context Protocol

 Local Data Sources

: Your computer’s files, databases, and services that MCP servers can securely access

 Remote Services

: External systems available over the internet (e.g., through APIs) that MCP servers can connect to

그래서, 결국 정리하자면 다음과 같은 문장으로 MCP를 설명할 수 있다.

" Host가 시키면, Client는 전달하고, Server는 수행한다.

MCP는 태어난지도 얼마 되지 않았고,

그렇기 때문에 아직 기술적 성숙도가 충분히 올라와 있지 않다.

그리고, 24년 11월 26일 최초 발표 이후, 25년 03월 26일에 업데이트가 이루어졌다.

아직 업데이트 된지가 얼마되지 않아 관련된 사항을 확인하기도 쉽지는 않다.

구글링된 결과들을 참고해도 좋긴 하지만, 공식 문서부터 확인하는 것을 강추 한다.

- https://modelcontextprotocol.io/

샘플 코드 같은 공식적인 자료들도 아래 GitHub에서 확인을 하면 좋다.

- https://github.com/modelcontextprotocol

MCP Server들을 모아놓은 Marketplace는 아래 사이트들을 참조하면 좋다.

- https://mcp.so/

- https://smithery.ai/

- https://mcpservers.org/

다음 포스팅에서는 간단한 활용법을 알아보도록 하겠다.

저작자표시 비영리 변경금지 (새창열림)

'AI_ML' 카테고리의 다른 글

MCP 맛보기 (GitHub Copilot + MCP) (0)	2025.04.15
주피터 노트북의 여러 도우미 (Jupyter Notebook's Helper) (1)	2024.02.12
Copilot 말고 GPT Pilot 으로 코딩해보자. (2)	2023.11.11
Kubeflow 설치 (in Kubernetes) (0)	2023.08.23
건방진 GPT를 아시나요? - BratGPT (0)	2023.07.16

오늘은 왠지 LLAMA가 눈길을 끌어서 ...

친절하게 예제 코드도 제시해주고 있다.

import torch

from transformers import AutoTokenizer, AutoModelForCausalLM

model_id = 'Bllossom/llama-3.2-Korean-Bllossom-3B'

tokenizer = AutoTokenizer.from_pretrained(model_id)

model = AutoModelForCausalLM.from_pretrained(

model_id,

torch_dtype=torch.bfloat16,

device_map="auto",

)

instruction = "철수가 20개의 연필을 가지고 있었는데 영희가 절반을 가져가고 민수가 남은 5개를 가져갔으면 철수에게 남은 연필의 갯수는 몇개인가요?"

messages = [

{"role": "user", "content": f"{instruction}"}

]

input_ids = tokenizer.apply_chat_template(

messages,

add_generation_prompt=True,

return_tensors="pt"

).to(model.device)

terminators = [

tokenizer.convert_tokens_to_ids("<|end_of_text|>"),

tokenizer.convert_tokens_to_ids("<|eot_id|>")

]

outputs = model.generate(

input_ids,

max_new_tokens=1024,

eos_token_id=terminators,

do_sample=True,

temperature=0.6,

top_p=0.9

)

print(tokenizer.decode(outputs[0][input_ids.shape[-1]:], skip_special_tokens=True))

3B 모델에서 과연 저 문제를 풀 수 있을까?

구글 코랩에서 위 코드를 실행해보자. (나는 GPU도 없는 가난한 머글이니까 ㅠㅠ)

어?! 시키는 그대로 했는데, 왜?!

구글 코랩에서 기본 버전을 업그레이드 해주면 발생하지 않을테지만,

현재는 transformers, tokenizers 버전이 낮아서 발생하는 것으로 보인다.

!pip install --upgrade transformers tokenizers

설치가 끝나면 세션 재시작을 요구한다.

하면 된다.

그리고 나서 실행하면 시간이 좀 걸리지만... 잘 된다.

철수가 20개의 연필을 가지고 있었고 영희가 절반을 가져가면, 영희가 가져간 연필은 20 / 2 = 10개입니다.

철수가 남은 연필은 20 - 10 = 10개입니다. 민수가 5개를 가져가면, 철수가 남은 연필은 10 - 5 = 5개가 됩니다.

따라서 철수가 남은 연필의 갯수는 5개입니다.

그리고, 문제도 잘 푼다!!!

저작자표시 비영리 변경금지 (새창열림)

'AI_ML > LLM' 카테고리의 다른 글

GitHub MCP Exploited: MCP를 통해 개인 저장소 정보 유출 (0)	2025.06.03
HuggingFace - Learn - NLP Course #3 (3)	2024.11.11
HuggingFace - Learn - NLP Course #2 (0)	2024.11.10
HuggingFace - Learn - NLP Course (1)	2024.11.09
Gemini 잔소리꾼 만들기 (1)	2024.11.08

이왕 살펴보는 김에 하나 더 해보려고 한다.

원하는 결과가 나오지 않을까봐 살짝 무섭기도 한데.... ^^

뉴스 제목을 보고 어떤 카테고리인지 맞춰보는 것을 한 번 해보려고 한다.

네이버 뉴스 데이터를 이용해보자.

정치, 경제, 사회 등의 카테고리 별로 현재 상단에 있는 뉴스 제목들을 가지고 와봤다.

from transformers import pipeline

classifier = pipeline("zero-shot-classification")

labels = ["정치", "경제", "사회", "생활/문화", "IT/과학", "세계"]

articles = [

"尹 대통령 선물받은 투르크 국견 해피·조이, 관저 떠나 서울대공원으로",

"트럼프, 인플레 우려에 관세폭탄 못할것",

"똑바로 살겠다…반성문 3번 쓴 음주뺑소니 김호중, 검찰은 징역 3년6개월",

"천재화가 천경자 특별전 개막..미공개 작품도 선 보여",

"매출 25% AI투자, 초개인화 'AI 검색' 일상속으로",

"네타냐후, 트럼프 당선에 ‘폭주’…팔·레바논 등 공격 100명 사망"

]

classifier(articles, candidate_labels=labels)

실행결과는 다음과 같이 나온다.

정답률이 엄청 안좋기 때문에 ^^

Top3 포함되면 정답으로 계산해서 33점.

이번에는 ko-LLM 리더보드에서 현재 1위를 하고 있는 모델을 이용해봤다.

from transformers import pipeline, AutoTokenizer, AutoModelForSequenceClassification

model_name = "maywell/Synatra-42dot-1.3B"

tokenizer = AutoTokenizer.from_pretrained(model_name)

model = AutoModelForSequenceClassification.from_pretrained(model_name)

classifier = pipeline("zero-shot-classification", model=model, tokenizer=tokenizer)

labels = ["정치", "경제", "사회", "생활/문화", "IT/과학", "세계"]

articles = [

"尹 대통령 선물받은 투르크 국견 해피·조이, 관저 떠나 서울대공원으로",

"트럼프, 인플레 우려에 관세폭탄 못할것",

"똑바로 살겠다…반성문 3번 쓴 음주뺑소니 김호중, 검찰은 징역 3년6개월",

"천재화가 천경자 특별전 개막..미공개 작품도 선 보여",

"매출 25% AI투자, 초개인화 'AI 검색' 일상속으로",

"네타냐후, 트럼프 당선에 ‘폭주’…팔·레바논 등 공격 100명 사망"

]

classifier(articles, candidate_labels=labels)

실행결과는 다음과 같다.

마찬가지로 Top3에 포함된 것 기준으로 67점이다.

혹시나 하고 ChatGPT를 시켜봤더니 Top1으로 해서 1개 빼고 모두 잘 분류했다. 역시 ChatGPT !!!

위의 작은 모델들은 Top1으로 하면 처참한 결과인데...

뭐 결과는 조금 마음에 들지는 않지만,

그래도 머리속에 있는 아이템을 가지고 HuggingFace를 이용해서 어떻게 해야할지에 대해서는

간단히 잘 살펴본 것 같다. (ChatGPT의 위대함을 느낀 것이 더 큰가?)

저작자표시 비영리 변경금지 (새창열림)

'AI_ML > LLM' 카테고리의 다른 글

GitHub MCP Exploited: MCP를 통해 개인 저장소 정보 유출 (0)	2025.06.03
HuggingFace - LLAMA 3.2 for Korean (2)	2024.11.12
HuggingFace - Learn - NLP Course #2 (0)	2024.11.10
HuggingFace - Learn - NLP Course (1)	2024.11.09
Gemini 잔소리꾼 만들기 (1)	2024.11.08

어제 포스팅 했는데, 뭔가 굉장히 찜찜한 마음이 들어서 추가적으로 공부를 해보고자 한다.

- https://www.whatwant.com/entry/HuggingFace-Learn-NLP

모델을 명시하지 않으면, "distilbert-base-uncased-finetuned-sst-2-english" 모델이 사용된다.

한글을 제대로 인식하지 못하는 모델이기에 다음과 같은 결과가 나온다.

이번에는 나름 유명한 koBert 모델로 지정해서 해보자.

이제는 조금 부정적인 것으로 인지하긴 하지만, 뭔가 부족하다.

한글을 잘 이해하는 모델을 어떻게 찾을 수 있을까?!

한글을 지원하는 LLM들의 성능 순위를 관리하는 곳 중에서 나름 유명한 곳이 있다.

- https://huggingface.co/spaces/upstage/open-ko-llm-leaderboard

Colab에서 실행하기 위해서는 Model Size는 좀 제한을 해야 한다.

내가 만약 A100이라던지 H100을 사용할 수 있다면 성능만 바라보고 할 수 있겠지만...

31.66점이라는 좀 많이 부족한 점수이지만 그래도 작은 사이즈의 모델에서는 어쩔 수 없다.

설명이 많이 부족하다.

사실 개인적으로 올리는 많은 모델들이 다 이렇다 ^^

결과는 와우~!!!

LABEL_0 으로 0.94 score를 주고 있다. 부정적이라고 확신하는 것이다!!!

어제 포스팅에서 한글 모델을 사용했음에도 제대로 감정 분류를 하지 못하는 결과가 나와서 찜찜했는데,

그나마 짧은 시간 투자해서 원하는 수준 이상으로 결과가 나와서 뿌듯하다 ^^

이게 제대로 살펴본 것인지는 확신할 수 없지만, 나름 개인의 만족 !!!

저작자표시 비영리 변경금지 (새창열림)

'AI_ML > LLM' 카테고리의 다른 글

HuggingFace - LLAMA 3.2 for Korean (2)	2024.11.12
HuggingFace - Learn - NLP Course #3 (3)	2024.11.11
HuggingFace - Learn - NLP Course (1)	2024.11.09
Gemini 잔소리꾼 만들기 (1)	2024.11.08
HuggingFace (허깅페이스 소개) (0)	2024.06.24

NLP 공부를 하려면 무조건 만나게 되는 HuggingFace(허깅페이스).

그런 허깅페이스에서는 친절하게도 강의를 제공해주고 있다.

더더욱 친절하게도 한글도 지원을 해준다.

왼쪽 아래에 위치하고 있는 "Learn"을 클릭해보자.

여러 강의를 제공해주지만,

지금 우리가 관심있는 것은 처음에 등장한 "NLP Course"를 클릭하자.

어?! 영어로 나오네!?

왼쪽 위에 있는 언어 선택 메뉴에서 "KO"를 선택하면 된다.

왼쪽 챕터를 보면 알겠지만, 아쉽게도 모든 강의를 한글로 제공해주지는 않는다.

(여러분들의 재능기부를 기대합니다!)

여기까지의 소개로만 끝나면 조금 아쉬움이 남으니.... ^^

HuggingFace를 활용하는 실습 코드들에 대해서 좀 더 알아보도록 하자.

강의 챕터 중 "트랜스포머로 무엇을 할 수 있나요?" 부분을 살펴보자.

가운데 위에 있는 "Open in Colab"을 클릭하자.

내 마음대로 수정하면서 뭔가 해보길 위해서는 "Drive에 사본 저장"을 해야 한다.

그런 다음 하나씩 실행해 보면서 살펴보자.

대체 뭐가 뭔지 모르겠다고!?

HuggingFace를 활용할 수 있게 해주는 transformers의 pipeline을 사용해주고 있다.

여기에서는 감정 분석을 하고자 "pipeline('sentiment-analysis')"를 사용한다.

그리고는 "I've been waiting for a HuggingFace course my whole life." 문장에 대해서 분석해보라고 하고 있다.

그러면 결과는 [{'label': 'POSITIVE', 'score': 0.9598048329353333}] 라고 나오게 된다.

실행 결과 메시지를 보면 현재 어떤 모델을 사용하고 있는지를 알 수 있다.

- https://huggingface.co/distilbert/distilbert-base-uncased-finetuned-sst-2-english

모델에 대한 정말 다양한 정보를 확인할 수 있다.

누가 개발했고, 라이선스는 어떻게 되며 어떻게 사용하는지에 대한 예제도 있고

심지어 위험성이나 편향성까지도 서술해주며, 어떤 데이터로 학습했는지도 알려준다.

오른쪽 부분을 보면 테스트를 해볼 수 있는 인터페이스도 제공해준다.

하지만, 우리는 한국인!!!!

지금 코드는 한글을 제대로 이해하지 못한다.

모델명만 봐도 알겠지만, 한글에 대해서 학습되지 못한 모델이다.

한글을 이해할 수 있는 아이로 해보자.

응?! label이 예쁘게 나오지도 않고 분석 결과도 좀 마음에 들지 않지만,

일단 내가 원하는 모델을 이용하는 방법을 살펴본 것으로 일단 만족해보자.

HuggingFace를 활용하는 것은 계속 더 공부해보도록 하겠다.

저작자표시 비영리 변경금지 (새창열림)

'AI_ML > LLM' 카테고리의 다른 글

HuggingFace - LLAMA 3.2 for Korean (2)	2024.11.12
HuggingFace - Learn - NLP Course #3 (3)	2024.11.11
HuggingFace - Learn - NLP Course #2 (0)	2024.11.10
Gemini 잔소리꾼 만들기 (1)	2024.11.08
HuggingFace (허깅페이스 소개) (0)	2024.06.24

그냥 막 갑자기 GenAI를 이용해서 뭐라도 하나 간단하게 만들어 보고 싶다는 생각에 막 진행해봤다.

0. 실습 환경

- Ubuntu 20.04

1. Gemini API

- 우리의 Google님은 간단하게 사용하는 정도는 무료로 제공해주신다.

. https://ai.google.dev/pricing?hl=ko#1_5flash

- 언제나 그렇듯이 API 사용을 위해서는 Key를 생성해야 한다.

. https://ai.google.dev/aistudio?hl=ko

- 구글 계정을 통해 로그인 하고 API key를 얻으면 된다.

. https://aistudio.google.com/apikey

2. React App 생성

- Vite를 이용해서 React App을 생성하자. 다음 링크를 참고해서 진행하면 된다.

. https://www.whatwant.com/entry/vite

3. 패키지 설치

- Gemini API 사용을 위해서 패키지를 설치하자.

> npm install @google/generative-ai

> npm install

> npm run dev

- 브라우저를 열어서 접속해보자.

4. 파일 생성

- src/ 디렉토리 밑에 파일 하나 새로 만들어서 코드를 작성해보자.

. 여기에서는 NagBox.jsx 이름으로 만들어봤다.

5. 코드 작성

- 다음과 같이 코드를 작성해보자.

import { useState, useEffect } from "react";
import { GoogleGenerativeAI } from "@google/generative-ai";

export default function NagBox() {
  const [response, setResponse] = useState("");
  const [error, setError] = useState(null);
  const [currentTime, setCurrentTime] = useState(new Date());

  const fetchNag = async () => {
    try {
      const genAI = new GoogleGenerativeAI("API KEY");
      const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
      const prompt = "공부를 열심히 할 수 있도록 잔소리를 해주세요.";
      const result = await model.generateContent(prompt);
      const text = result.response.text();
      setResponse(text);
    } catch (err) {
      setError(err.message);
    }
  };

  useEffect(() => {
    fetchNag();

    const nagIntervalId = setInterval(fetchNag, 30000);
    const clockIntervalId = setInterval(() => setCurrentTime(new Date()), 1000);

    return () => {
      clearInterval(nagIntervalId);
      clearInterval(clockIntervalId);
    };
  }, []);

  return (
    <div style={{ position: "relative", minHeight: "100vh" }}>
      {error ? <p>{error}</p> : <p>{response}</p>}
      <div
        style={{
          position: "fixed",
          bottom: 10,
          right: 10,
          backgroundColor: "white",
          padding: "10px",
          borderRadius: "5px",
          boxShadow: "0 0 10px rgba(0,0,0,0.2)",
        }}
      >
        {currentTime.toLocaleTimeString()}
      </div>
    </div>
  );
}

- main.jsx 파일도 수정해주자.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
// import App from './App.jsx'
import App from './NagBox.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

- 웹브라우저로 결과를 확인해보자.

이모지를 사용하라고 하지도 않았는데...

우와... 잔소리를 하라고 했지, 나의 자존감을 꺾으라고는 안했는데... 우와~~~~ 제미나이, 대단하네!!!

기본적인 코드는 아래 사이트를 참고했습니다.

- https://www.codedex.io/projects/generate-a-poem-with-google-gemini

저작자표시 비영리 변경금지 (새창열림)

'AI_ML > LLM' 카테고리의 다른 글

HuggingFace - LLAMA 3.2 for Korean (2)	2024.11.12
HuggingFace - Learn - NLP Course #3 (3)	2024.11.11
HuggingFace - Learn - NLP Course #2 (0)	2024.11.10
HuggingFace - Learn - NLP Course (1)	2024.11.09
HuggingFace (허깅페이스 소개) (0)	2024.06.24

머가필요해

AI_ML

GitHub MCP Exploited: MCP를 통해 개인 저장소 정보 유출

'AI_ML > LLM' 카테고리의 다른 글

MCP 맛보기 (GitHub Copilot + MCP)

'AI_ML' 카테고리의 다른 글

MCP (Model Context Protocol) Overview

 MCP Hosts

 MCP Clients

 MCP Servers

 Local Data Sources

 Remote Services

'AI_ML' 카테고리의 다른 글

HuggingFace - LLAMA 3.2 for Korean

'AI_ML > LLM' 카테고리의 다른 글

HuggingFace - Learn - NLP Course #3

'AI_ML > LLM' 카테고리의 다른 글

HuggingFace - Learn - NLP Course #2

'AI_ML > LLM' 카테고리의 다른 글

HuggingFace - Learn - NLP Course

'AI_ML > LLM' 카테고리의 다른 글

Gemini 잔소리꾼 만들기

0. 실습 환경

1. Gemini API

2. React App 생성

3. 패키지 설치

4. 파일 생성

5. 코드 작성

'AI_ML > LLM' 카테고리의 다른 글

+ Recent posts

티스토리툴바