과제
Open AI 어시스턴스 만들기
어시스턴트와 관련 된 기본용어 찾아서 정리해보기, 어시스턴트id,스레드id
어시스턴트에 간단하게 이력서샘플 만들어서 업로드
어시스턴트 api로 바꾸기


Assistants API 구조

출처:https://cdn.openai.com/API/docs/images/diagram-assistant.webp


기본요소


*assistant=목적에 맞는 로봇
 

from openai import OpenAI
import time


# OpenAI API 키 설정
client = OpenAI(api_key="")

#assistant 생성
assistant = client.beta.assistants.create(
     name="Math Tutor",
     instructions="You are a personal math tutor. Answer questions briefly, in a sentence or less.",
     model="gpt-3.5-turbo",
 )
# # 생성된 챗봇의 정보를 JSON 형태로 출력합니다.
print(assistant)

assistant_id=""


*thread=카톡 방,하나의 thread 안에 여러개의 메세지 존재

# # # 새로운 스레드를 생성합니다.
thread = client.beta.threads.create()

print(thread)

#resume thread
thread_id = ""

 
 

*message=thread 안에 있는 대화들
 
종류
-system:어시스턴트가 참고할 만한 전역조건
-user: 사용자의 질문
-assistant: ai의 답변
 
thread는 여러개의 메세지를 가지고 있을 수 있다
 
message{
role:user//user 메세지
content는 물어보고 싶은 거 담으면 된다
}

message = client.beta.threads.messages.create(
    thread_id,
    role="user",
    content="서찬의 전화번호 알고 싶습니다",
)

print(message)

 

*run:어시스턴트가 정해진 대화를 통해 객채를 만듬, 실행시점을 관리

어시스턴트와 쓰레드는 독립(수학 과학 관련된 로봇과 관련없는 수학과 과학 관련된 카톡방)
일관성을 위해 하나의 주제에 맞는 어시스턴트에 하나의 주제에 맞는 쓰레드가 좋다

run을 사용할 때는 쓰레드와 어시스턴트가 독립적이기에 각각 아이디를 받아온다

status
queued 대기중-비동기처리로 단계관리하기 위해->원하는 시점에 데이터를 받아 올 수 있다
completed 질문 답변 완료

list로 답변 확인
 

# 실행할 Run 을 생성합니다.
# Thread ID 와 Assistant ID 를 지정합니다.
run = client.beta.threads.runs.create(
  thread_id="",
  assistant_id="",
)

print(run)

run_id = run.id

while True:
  run = client.beta.threads.runs.retrieve(
    thread_id=thread_id,
    run_id= run_id,
  )
  if run.status == "completed":
    break
  else:
    time.sleep(2)
  # print(run)


thread_messages = client.beta.threads.messages.list(thread_id)
print(thread_messages.data[0].content[0].text.value)





Assistants API

->chatgpt의 텍스트 형식의 도구의 제약을 해소하기 위해 탄생

code interpreter
-디버깅과 다른 느낌
-토큰 제한수를 넘는 데이터를 위해 쿼리문을 작성해서 토큰을 효율적이게 사용
-쉽게 말해 엄청난 양의 데이터 분석 가능

retrieval
-검색
-우리의 자료로 결과를 낼 수 있다
-문서를 gpt에게 학습을 시켜 그 문서를 토대로 답변을 해준다


function
-내가 만든 함수를 기반으로 어시스턴트가 사용할 수 있게 만들어준다(예를들어 검색으로 학습한 문서를 기반으로 함수를 만들 수 있다)

 

Retreieval을 활용하여 이력서 학습을 시켜 나만의 챗봇 만들기

1. openai api 사이트에서 내가 만든 어시스턴트에 내 이력서 파일을 넣어준다(+추가로 instructions도 수정 가능)
 

어시스턴트에 간단하게 이력서샘플 만들어서 업로드

 
2. 프로트엔드 서버에서 입력값 받아와 출력하기
 
아래 블로그에서 참고
Front & Back 서버 연결(axios 실습) :: West_Cold (tistory.com)

 

Front & Back 서버 연결(axios 실습)

기술과제 • Python Falsk 가 무엇인지 • Axios가 무엇인지 (Fetch함수는 무엇인지) 코딩과제 • 본인 포트폴리오 코드 Github에 올리기 • Varcel에 본인 코드 배포하기 • 본인이 만든 파이썬코드 내용

eatitstory.tistory.com

 

from openai import OpenAI
import time
from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 모든 출처에서의 요청을 허용합니다.

# OpenAI API 키 설정
client = OpenAI(api_key="")


@app.route('/sendMessage', methods=['POST'])
def send_message():
    data = request.get_json()
    user_input = data.get('user_input')

    try:
        assistant_id=""

        #resume thread
        thread_id = ""

        message = client.beta.threads.messages.create(
            thread_id,
            role="user",
            content=user_input,
        )

        # 실행할 Run 을 생성합니다.
        # Thread ID 와 Assistant ID 를 지정합니다.
        run = client.beta.threads.runs.create(
          thread_id=thread_id,
          assistant_id=assistant_id,
        )

        run_id = run.id

        while True:
          run = client.beta.threads.runs.retrieve(
            thread_id=thread_id,
            run_id= run_id,
          )
          if run.status == "completed":
            break
          else:
            time.sleep(2)


        thread_messages = client.beta.threads.messages.list(thread_id)
        ai_response = thread_messages.data[0].content[0].text.value

        return jsonify({"description": ai_response})

    except Exception as e:
        return jsonify({"error": str(e)})

if __name__ == '__main__':
    print("Flask 애플리케이션이 실행되었습니다.")
    app.run(debug=True)

 
3. 결과


참고영상

https://youtu.be/kKhWkG5Di5s?si=Pvi8JbR_vmqZcdpt

https://youtu.be/-Wne4a-8RlY?si=bpn6IyXQIQBXal86

 

인공지능
-함수(머신러닝)
-인간의 학습능력,지각능력 등을 컴퓨터 프로그램을 실현한 기술
-컴퓨터의 동작이 지적이고 상황에 따라 적절히 변하며 안정적이길 원함

머신러닝
-데이터를 이용한 모델링 기법(수리적 모델링이 어려운 문제를 주로 적용)
-인식 관련 정의가 어려운 문제들

learning problem
-사람이 할 수 있는 특정한 작업을 수행하는 완벽한 알고리즘을 설계는 사실상 불가능
-그럴싸하게 도출하는 알고리즘을 찾을 수 있다고 하더라도,, 이외의 다른 모든 작업마다 그럴싸한 알고리즘을 설계하는데 과도한 시간과 비용이 소모됨
->예시(데이터)에 기반한 학습의 필요성
-생성형 ai/강화학습/노래 알고리즘

머신러닝의 핵심요소
(1)데이터(example과 label) 가장 중요하다
-규칙을 알려주지 않고 데이터만 넣어준다
(2)러닝 모델과 러닝 알고리즘
러닝모델:예시를 입력으로 받아 예측 레이블을 출력하는 함수
러닝 알고리즘:예측 정확성이 높아지는 방향으로 러닝 모델을 개선하는 알고리즘
(3)요인 추출
러닝 모델의 예측 정확도를 보다 효과적이고 효율적으로 향상시키기 위해, 기존의 예시로부터 새로운 요인을 추출하여 이를 러닝 모델의 입력값으로 대신사용하는 것
-정답은 없다


-주어진 데이터 값과 함수가 예측한 값의 차이를 나타내는 손실함수를 감소시키는 것이 학습의 목적
-데이터를 통해 경험적 러닝이 되는 중요요소(데이터/패턴=함수/수학적으로 해결할 수 없는 문제)
-국지해가 아닌 전역최적해를 찾아야함


머신러닝의 세가지 분류
-지도학습
분류/회귀

-분류
cofusion matrix
-관심있는 값이 중심이 되어 positive가 된다(ex 오류에 관심이 있으면 오류가 positive)

자료출처: https://uploads-ssl.webflow.com/6266b596eef18c1931f938f9/644aea65cefe35380f198a5a_class_guide_cm08.png


precision
recall
두개의 조화평균:F1score높게 나와야 좋다/못하는 쪽으로 가중치

모델의 데이터 세팅
training-모델의 파라미터 정하기 위해
validation->overfititing 방지
test-최종 성능을 평가하지 앟기 위해 사용


-비지도 학습->정답이 없을 때 ngiht도출
군집화
연관분석


-강화학습
나중에 더 큰 상을 위해 희생한다-순차적 의사결정/감독 없이 오직 상으로만 관리

인공신경망
특징
-예를 통한 학습
-일반화:학습되지 않은 입력에도 올바른 결과를 출력
-연상기억: 새로운 입력, 일부 유실된 정보->유사한 출력
-결함 허용성->병렬
-기본작업:학습-신경망의 연결가중치 조정/재생: 학습된 가중치와 입력벡터와의 거리 계산하여 가장 가까운 클래스로 분류

입력은 다수 출력은 하나
층이 쌓일수록 비선형이 커진다
선형분리성의 문제로 다층 퍼셉트론 사용(다층 퍼셉트론 및 오류역적파 알고리즘의 기반 모델)

딥러닝:은닉층이 2개 이상
아주 많은 데이터와 아주 오랜 시간의 최적화를 통해 데이터 학습/인간의 입력이 아닌 컴퓨터가 학습
특징
다층구조
문제해결 과정을 학습을 통해 자동화분산 표현/정보처리

모델의 역사
-하드웨어(GPU)
-빅데이터 출현(대량의 데이터 확보 가능)
-획기적 알고리즘의 발전
-개발 환경의 진화(클라우드/공개 소프트웨어..등등)

지능형 제어시습템

제어 자동화

산업혁명4.0은 기계와 사람, 서비스가 상호 연결되는 지능형 생산체계
기계의 지능화와 자율제어실현

제조인공지능
-설비 지능화-빅데이터 분석을 통해 언제 고장나는지 예측하여 필요한 경우 조치(계획보전->예지보전)
-공정 지능화-인공지능 기반 공정 제어-전체 공정의 최적화,공정 품질 향상
-검사 지능화-결함 유형 분류 자동화, 정확도 향상
-자재 및 물류 지능화-실시간 제조 상황 판단, 자재물류 최적 제어

'Major > Smart Factory' 카테고리의 다른 글

Meta-heuristic(2)  (0) 2024.06.08
Meta-heuristic(1)  (1) 2024.06.08
Scheduling  (0) 2024.06.08
통계적 가설검정과 품질경영  (0) 2024.05.13
4차산업혁명과 스마트공장의 개념  (0) 2024.05.13

통계

1.확률
동시발생개념:주사위

상대빈도개념:횟수

주관적 확률 개념

확률변수:0~1:통계적 사건의 결과를 실수로 변환
확률분포:일정한 확률분포(패턴)을 가진다는가정

이산분포:정수/이항분포,포아송분포,기하분포->확률질량함수
연속분포:실수/정규분포/지수분포->확률밀도함수

확률질량함수:이산확률변수가 특정한 값을 취할 확률
-X-는 정수
-합은 1
-확률은 0이상
-유한개의 확률변수

확률밀도함수
-적분 필요
-한점에 대응되는 확률을 구할 수 없음=p(x=x)=0
-특정 구간에 대하여
-무한개의 확률변수

대표값
산포도-분산=정보의 양

시스템-모델
모집단-표본

표본평균의 분포->정규분포

중심극한의정리

출처:https://blog.kakaocdn.net/dn/T1SUj/btqve7b5rWv/6f8wNQM4UJOGfdhqLnFZaK/img.png



가설:경험적으로 또는 논리적으로 검정되는 조건 또는 명제-귀납적+연역적

귀무가설:품질관리 측면에서는 기각되지 않길 바람
대립가설:신제품 입장에서는 기각되길 바람

통계적 가설검정의 절차
1가설설정
2유의수준(1종오류를 범할 확률)과 임계치 결정
3.귀무가설의 채택영역과 기각영역의 결정
4통계량 계산
5통계량과 임계치의 비교 및 결론

유의수준0.1~0.01 사이면 2종오류 발생확률이 있을 수 있다

품질경영
전통적 품질관리(QC)-
-사후적 좋은 품질 만들어지는지 검사 및 관리
현대적 품질경영(QM)
-소비자 또는 사용자 중심
-사전적 계획

품질의 의미
전통-사전에 정의된 규격에 적함/생산자 입장
현대-고객 및 이해관계자들의 요구사항을 충족/소비자 관점+생산자 관점

제품/서비스 수명주기 단계
-요구품질:고객의 요구를 얼마나 잘 인식하고 있는지를 나타내는 품질
-설계품질: 설계가 수행하기에 적합한지 나타내는 품질
-제조품질: 제조된 제품이 설계기준과 어느 정도 일치하는지
-사용품질:고객이 원하는 목적과 용도에 제품이 얼마나 적합하는지

품질경영의 목적
-품질비용의 최소화(예방비용, 평가비용, 실패비용)



품질경영의 효과
-제품자체의 품질 향상효과
-내부시스템의 품질 향상 효과-재작업 및 정체시간의 감소 효과/재고 감소

품질검사의 분류
-전수검사(머신)
-파괴검사(마네킹으로 안전검사)
-소비자 의견 조사(설문조사)
-표본추출검사(반도체)

공정관리도
배경:표본추출 검사의 한계->불량 판정은 가능 하지만 원인 추출은 불가능
원인: 품질문제의 근본 원인-> 품질변동 또는 산포현상
-우연원인
-이상원인->통제가 가능한 분명한 요인
기법: 공정관리도->이상원인을 발견하여 공정을 관리상태로 유지하기 위한 기법

중심선 관리상한선 하향선

관리도 유형
(1)변량관리도
특성치-연속적이고 정량적인 지표(제품 크기, 길이..)
관리도 종류-평균 관리도/범위 관리도/평균-범위 관리도

(2)속성관리도
특성치-불량품의 빈도와 같은 이산적 지표(오타의 수, 섬유 한 롤의 결점 수)
관리도 종류-불량품 관리도(불량의 비율)/결점수 관리도(단위 크기당 결점 수)

'Major > Smart Factory' 카테고리의 다른 글

Meta-heuristic(2)  (0) 2024.06.08
Meta-heuristic(1)  (1) 2024.06.08
Scheduling  (0) 2024.06.08
머신러닝 기본 개념  (0) 2024.05.13
4차산업혁명과 스마트공장의 개념  (0) 2024.05.13

1. 생산성과 산업혁명

1-1생산성의 문제
생산성의 고려-애덤스미스->자유경쟁/분업...
생산성 향상의 개념: 예전에는 얼마 정도 투입해서 업무를 완성했다면 지금은 얼마정도 생산요소 투입
정보기술 자동화기술 운영기술 모두 중요

1-2 산업혁명
-농경사회->(공업화)->산업사회
-주요계기: 200년 전 영국에서 시작된 산업혁명(증기기관,전기)
-산업혁명:증기기관-도시의 진화: 전기-3차 산업혁명: 컴퓨터-4차 산업혁명:인공지능
1-3 4차 산업혁명
iot cps ai를 핵심 기술로 4차산업 발생->스마트공장이 핵심적인 역활을 할것으로 본다

CPS 최적의 제어 가능하는 기술=사이버세계와 물리세계가 동기화되게 하는 기술

2. 산업환경과 제조시스템의 변화

2-1 제조환경의 변화
-초고령화->제조업 생산인구 급감->자동화 필수
-제조분야에 대한 업무기피 심화->해외이전
-그럼에도 리쇼어링 분위기 확산(인건비가 싼 국가로 생산기지를이전했던 기업을 다시 국내로 불러들이는 정책)
-대량맞춤형->개인화를 통한 다품종소량 생산

2-2 생산관리/제조혁신 방법론의 발전
분업->과학적관리(테일러)->연속적 조립생산(포드 컨베이어 벨트)->통계적품질관리와 경영과학->린생산시스템->유연생산시스템->글로벌 경쟁시대

-과학적 관리(제조혁신의 시초): "시간 연구"와 "동작연구"를 기초로 노동의 표준량 산정+임금 지급 방법 연구/솔선과 격려의 경영/과학=객관적->현대사회에서는 데이터가 중요

-포드생산시스템: 컨베이어 시스템을 이용한 "이동조립작업"과 대량생산 그리고 혁신적 "인적자원경영"
3S 대량생산의 일반원칙->작업의 단순화/부품 표준화/기계와 공구 전문화
작업의 원칙-허리 굽히지 않기/한발이라도 움직이지 않기


2-3 제조혁신의 원동력
-생산시스템: 셀 생산시스템(컨베이어+유연성)/gt 공정보단 제품 중심/jit 다기능 공화 기계설비의 합리적 배치(u자형)/유연생산시스템(fms) 순서 없이 생산/재구성형생산시스템(rms) 재구성이 가능한 기계들과 제어장치

-정보시스템: erp 경영 프로세스들을 통합적으로 연계해 관리/ scm 공급사슬의 통합적 관점에서 관리/crm 판매실적 등 고객과의 관계 데이터 분석/mes 현장의 활동을 관리/ plm 제품 설계부터 최종생산까지 이르는 전체과정을 일관적으로 관리

3. 스마트공장의 개념과 사례

3-1 스마트공장의 정의, 목표 및 요건
-스마트 공장: 비즈니스 전반에 "최적화"를 가능하게 하며 유연한 운영을 통합하고 개방을 통해 "고객과 소통하는 공장"/비즈니스 프로세스의 정보화 및 생산시스템의 "자동화=지능화"를 실현하는 공장
-스마트공장 목표: 생산시스템을 "지능화 유연화 최적화 효율화"를 통해 고객요구에 능동적으로 대응할 수 있는 제조기업을 구현하는 것
-요건 (4m1e: men, machinery, material, method enviroment)의 디지털화 지능화 통합 엔지니어링 지식의 창출 타 스마트 시스템과의 연결


3-2 스마트공장의 범위
-모든 제조 관련 과정을 포함
-일반과정+ICT 기술 및 기업정보시스템의 적용도 포함

3-3 스마트 제조 기술

8대 스마트 제조기술

생산시스템혁신기술
스마트센서/사이버물리시스템/3D프린팅/에너지절감 기술

정보통신기반기술
사물인터넷/클라우드/빅데이터/홀로그램

-사물인터넷
-빅데이터(정/비정)
-클라우드
-인공지능

'Major > Smart Factory' 카테고리의 다른 글

Meta-heuristic(2)  (0) 2024.06.08
Meta-heuristic(1)  (1) 2024.06.08
Scheduling  (0) 2024.06.08
머신러닝 기본 개념  (0) 2024.05.13
통계적 가설검정과 품질경영  (0) 2024.05.13



카테고리
'Language/R' 카테고리의 글 목록 :: West_Cold (tistory.com)

'Language/R' 카테고리의 글 목록

IT 스터디 기록장

eatitstory.tistory.com


R의 기초
https://eatitstory.tistory.com/m/13

R의 기초

R이란?통계분석, 머신러닝, 인공지능을 위한 언어 R vs 파이썬(둘다 데이터를 사용하지만) R-분석업무 파이썬-IT기술업무 *벡터 interger, numeric, character, logical 유형 벡터의 선언> name = c("유비", "관우"

eatitstory.tistory.com


함수와 프로그래밍
https://eatitstory.tistory.com/m/14

함수와 프로그래밍

기초적인 함수 만들어 보기> sum1ton = function(n){ + result= sum(1:n) + return(result) + } > sum1ton(100) [1] 5050for/while(반복)> i=0 > for (i in 1:10) { + print(i) + } [1] 1 [1] 2 [1] 3 [1] 4 [1] 5 [1] 6 [1] 7 [1] 8 [1] 9 [1] 10 > number =1 >

eatitstory.tistory.com


미적분
https://eatitstory.tistory.com/m/15

미적분

직접 미분식을 만들어 사용> fd = function(f,x, h=x*sqrt(.Machine$double.eps)){# 작은 h + return((f(x+h)-f(x))/h) #전진차분 + } > > f= function(x){ + return(-x^2+6*x-6) + } > > fd(f,2, h=1) [1] 1 > > curve(f,1,5)#함수f에서서 구간[1,5]

eatitstory.tistory.com


선형대수
https://eatitstory.tistory.com/m/16

선형대수

벡터의 시각화> install.packages("matlib") > library(matlib) > xlim=c(0,6) > ylim=c(0,6) #x축과 y축의 범위를 설정하는 변수들입니다. 여기서는 (0, 6) 범위를 설정하여 그래프의 크기를 결정합니다. > plot(xlim, ylim,

eatitstory.tistory.com



선형회귀
https://eatitstory.tistory.com/m/17

선형회귀

*변수간 연관성: 상관계수 상관계수는 변수간 공분산을 각각의 표준편차의 곱으로 나눠준 결과값 코사인 값가 비슷하다 두 벡터간 공유하는 정보가 얼마인지에 대한 측면에서 벡터의 내적과 상

eatitstory.tistory.com



 

'Major > Data Analysis' 카테고리의 다른 글

Decision Tree(의사결정나무)  (0) 2024.06.17
KNN  (0) 2024.06.17
Modeling & Validation & Visualization  (1) 2024.06.17
데이터기반의 수요예측 모델링과 의사결정 최적화  (2) 2024.06.17
머신러닝의 기초  (0) 2024.04.20

기술과제

• Python Falsk 가 무엇인지

• Axios가 무엇인지 (Fetch함수는 무엇인지)

코딩과제

• 본인 포트폴리오 코드 Github에 올리기

• Varcel에 본인 코드 배포하기

• 본인이 만든 파이썬코드 내용을 Flask에 이동시키기

• localhost:5000/sendMessage API 만들기

• API호출, Next.js에서 사용자가 입력한값을 보내기 (Axios요청)

• 개발자도구 콘솔창에 응답값을 console.log가지고 찍어보기


https://eatitstory.tistory.com/22

백엔드 서버 구현해보기(flask 실습)

기술과제• Python Falsk 가 무엇인지• Axios가 무엇인지 (Fetch함수는 무엇인지)코딩과제• 본인 포트폴리오 코드 Github에 올리기• Varcel에 본인 코드 배포하기• 본인이 만든 파이썬코드 내용을 Flas

eatitstory.tistory.com

위 블로그 글에서 계속 이어나가서
 
 
axios
-자바스크립트에서 비동기로 http 통신을 쉽게 처리할 수 있도록 만든 라이브러리
-외부 라이브러리로 별도의 설치가 필요하며 import 또는 require필요
-운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용
-http 요청 취소 및 요청과 응답을 json형태로 자동 변경 시켜 줌
-백엔드 서버와 프론트엔드 서버 간의 통신으로 데이터를 가져오거나 전송하는데 사용

fetch
-자바스크립트에서 api를 연동하기 위해서 사용
-웹 브라우저의 내장 api이기 때문에 별도의 라이브러리 설치 없이 사용 가능(import 필요없음)
-백엔드 서버와 프론트엔드 서버 간의 통신으로 데이터를 가져오거나 전송하는데 사용
-josn 변환 과정 필요
 
axios가 좀 더 호환성(여러 브라우저에서 가능) 및 기능이 많아 사용을 많이 한다
 
axios 기본세팅

npm install axios
 
import axios from 'axios';

// GET 요청 보내기
  .then(response => {
    console.log('Response:', response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

// POST 요청 보내기
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
    console.log('Response:', response.data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

 
 
• API호출, Next.js에서 사용자가 입력한 값을 보내기 (Axios요청)

import React, { useState } from 'react';
import axios from 'axios';

const ChatGPT = () => {
    const [inputValue, setInputValue] = useState('');
    const [chatHistory, setChatHistory] = useState([]);
    const [responseMessage, setResponseMessage] = useState('');
    const [isTyping, setIsTyping] = useState(false); // 초기에는 "입력하세요" 메시지를 표시하지 않습니다.

    const sendMessage = async () => {
        try {
            const response = await axios.post('http://127.0.0.1:5000/sendMessage', {
                user_input: inputValue // 사용자가 입력한 값을 전송합니다.
            });
            setResponseMessage(response.data.description);// API 응답에서 내용을 가져와 상태에 설정합니다.

            // 채팅 기록에 사용자가 입력한 메시지와 챗봇의 응답을 추가합니다.
            setChatHistory(prevChat => [...prevChat, { text: inputValue, sender: 'user' }]);
            setChatHistory(prevChat => [...prevChat, { text: response.data.description, sender: 'bot' }]);

            // 상태가 제대로 업데이트되었는지 콘솔에 출력
            console.log('Response message:', response.data.description);
        } catch (error) {
            console.error('Error sending message:', error);
        }
        // 사용자가 입력한 메시지를 비웁니다.
        setInputValue('');
        // 사용자가 입력 중인 것으로 간주하여 "입력해주세요" 메시지를 숨깁니다.
        setIsTyping(false);
    };

    const handleInputChange = (event) => {
        setInputValue(event.target.value);
        // 사용자가 입력을 시작하면 "입력해주세요" 메시지를 숨깁니다.
        setIsTyping(true);
    };

    const handleKeyPress = (event) => {
        if (event.key === 'Enter') {
            sendMessage();
        }
    };

    return (
        <div className="chat-container">
            <div className="chat-history">
                {chatHistory.map((message, index) => (
                    <div key={index} className={`message ${message.sender}`}>
                        {message.text}
                    </div>
                ))}
                {/* 입력 메시지가 없고 사용자가 입력 중이 아닌 경우에만 "입력하세요" 메시지를 표시합니다. */}
                {!isTyping && chatHistory.length === 0 && (
                    <div className="messagebot">서찬에 대해 궁금한 것을 입력하세요</div>
                )}
            </div>
            <div className="chat-input">
                <input
                    type="text"
                    value={inputValue}
                    onChange={handleInputChange}
                    onKeyPress={handleKeyPress} // 엔터 키 입력 감지
                    placeholder="메시지를 입력하세요..."
                />
                <button onClick={sendMessage}>전송</button>
            </div>
        </div>
    );
};

export default ChatGPT;



• 개발자도구 콘솔창에 응답값을 console.log가지고 찍어보기

'Development > Front' 카테고리의 다른 글

로딩창 만들기  (0) 2024.05.26
Next.js 실습  (0) 2024.05.05
React 실습  (0) 2024.04.28
Typing Game 만들어보기(비동기 실습)  (1) 2024.04.28

기술과제

• Python Falsk 가 무엇인지

• Axios가 무엇인지 (Fetch함수는 무엇인지)

코딩과제

• 본인 포트폴리오 코드 Github에 올리기

• Varcel에 본인 코드 배포하기

• 본인이 만든 파이썬코드 내용을 Flask에 이동시키기

• localhost:5000/sendMessage API 만들기

• API호출, Next.js에서 사용자가 입력한값을 보내기 (Axios요청)

• 개발자도구 콘솔창에 응답값을 console.log가지고 찍어보기


 

코딩과제

 

• 본인 포트폴리오 코드 Github에 올리기

• Varcel에 본인 코드 배포하기

 

WEST_COLD (westcold.vercel.app)

 

WEST_COLD

west__cold Raclette knausgaard hella meggs normcore williamsburg enamel pin sartorial venmo tbh hot chicken gentrify portland. 안녕하세요, 저는 서찬이라고 합니다. 나날이 성장하고 발전하는 것을 즐기는 사람입니다. 언제

westcold.vercel.app

 

 

 



flask
-백엔드의 전반적인 역활을 해준다
-웹페이지를 인터넷에 띄우고, 사용자들의 접속인 트래픽을 감당하고, 회원들의 정보와 게시판 정보를 관리하는 역활을 도와준다
- API 서버를 만드는 데에 특화 되어있는 Python Web Framework 
-URL을 파이썬 코드의 함수나 메서드에 매핑할 수 있는 라우팅 메커니즘을 제공

 

flask 기본 세팅

pip install Flask

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'he'

if __name__ == '__main__':
    app.run(debug=True)

 

기본세팅 결과물

 

• 본인이 만든 파이썬코드 내용을 Flask에 이동시키기

from flask import Flask, request, jsonify
from flask_cors import CORS
from openai import OpenAI
import requests
import json

app = Flask(__name__)
CORS(app)  # 모든 출처에서의 요청을 허용합니다.

# OpenAI API 키 설정
client = OpenAI(api_key="")

@app.route('/sendMessage', methods=['POST'])
def send_message():
    data = request.get_json()
    user_input = data.get('user_input')

    try:
        # OpenAI에 사용자 입력 전달하여 응답 받기
        completion = client.chat.completions.create(
            model="gpt-3.5-turbo",
            messages=[
                {"role": "user", "content": user_input}
            ]
        )
        ai_response = completion.choices[0].message.content.strip()

        return jsonify({"description": ai_response})

    except Exception as e:
        return jsonify({"error": str(e)})


if __name__ == '__main__':
    print("Flask 애플리케이션이 실행되었습니다.")
    app.run(debug=True)

 

• localhost:5000/sendMessage API 만들기

-위 코드는 '/sendMessage' 엔드포인트에 POST 요청을 받으면 요청의 JSON 데이터에서 'message' 값을 읽어와 성공 응답을 반환한다.

 

뒤에서 계속

https://eatitstory.tistory.com/23

 

프론트와 백 서버 연결(axios)

기술과제• Python Falsk 가 무엇인지• Axios가 무엇인지 (Fetch함수는 무엇인지)코딩과제• 본인 포트폴리오 코드 Github에 올리기• Varcel에 본인 코드 배포하기• 본인이 만든 파이썬코드 내용을 Flas

eatitstory.tistory.com

 

이번주 과제

https://eatitstory.tistory.com/m/20

 

next.js 실습

# 기술과제 - SSR, CSR이란 무엇인가? - Next.js란 무엇인가? - Next.js 설치 후 사용해보기 - Next 가 버전이 두개가 있다 - /pages - /app - git이 무엇인지? - commit - add - push - pull - github에 Next.js 내코드 올릴 저

eatitstory.tistory.com


+

git이 무엇인지?
    - commit
    - add
    - push
    - pull



*git
시간관리
-작업했던 파일들을 버전을 언제든 되돌릴 수 있다
차원관리
-프로젝트의 내용을 다른 폴더인 것처럼 여러모드로 변경가능
협업에서도 중요한 기능

*github
git으로 관리하는 프로젝트를 온라인 공간에 공유해서 프로젝트 구성원들이 함께 소프트웨어를 만들어 갈수있게 도움을 준다


git init : git이 관리하라는 명령어
git status : 현재 폴더를 git의 관점에서 보여주는거
gitignore 파일: 배재할 요소 지정

commit 버전
*git add 파일명- 버전 타임캡슐에 들어감
git add . 모든 파일 캡슐에 넣기


*commit 의미있는 변경 작업들을 저장소에 기록하는 동작/add로 해줘야 tracked 된다
git commit 새로운 버전을 만든다
git commit -m "수정된 파일이름" 바로 새로운 커밋 생성
git commit -am "파일이름" 새로운 커밋생성

git log 커밋한 파일들을 볼 수 있다

git branch 메인
git branch add-coach 새로운 중기 추가
git switch add-coach 애드코치고 이동
git branch -d (삭제할 브랜치명)
git branch -m(기존)(새브랜치)
git merge add-coach 브랜치 합치기

github레포지토리
git remote add origin (주소) git에 원격저장소추가
git branch -M main 기본브랜치명을 메인으로
git push -u origin main 파일을 원격저장소에 추가
메인에서의 푸시는 오리진의 메인 브랜치로 가게 된다

git clone /git bash를 사용하여 폴더 다운

*git push 새로운 커밋 생성(git push -u origin main로 설정되어 있어서 가능)
*git pull 깃헙에 있는 커밋을 내 컴퓨터로 가져오기

 

참고영상

제대로 파는 Git & GitHub (대학생 전체강의 반값할인) (youtube.com)

+ Recent posts