일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
- 이벤트 루프
- map
- 문자열
- ajax
- scroll
- Push
- 모듈
- event
- 이벤트 위임
- array
- Flex
- slice
- IntersectionObserver
- 애니메이션
- 비동기
- 객체
- json
- object
- 클로저
- Promise
- input
- ios
- This
- 스크롤
- ES6
- 배열
- video
- dom
- animation
- 이벤트
- Today
- Total
목록2025/03 (5)
FEDev Story

◆ 데이터데이터 컴포넌트는 'str', 'number', 'bool', 'date', 'markdown' 등을 사용할 수 있다. 판다스의 데이터 프레임을 기본으로 사용한다. 출력 데이터 타입은 numpy array 타입이나 파이썬의 array로 출력할 수 있다.import gradio as grdef display(data): return datagr.Interface(fn=display, inputs=gr.Dataframe(), outputs="dataframe").launch()◆ 미디어그라디오에서는 image, video, audio, file 등의 파일을 media 컴포넌트를 통해 사용할 수 있다.○ 이미지 컴포넌트 - gr.Image()다음은 이미지를 입력하는 예제이다.import grad..

◆ RowRow는 앱 안에서 컴포넌트를 수평으로 배치할 때 사용한다.with gr.Blocks() as app: with gr.Row(): 컴포넌트1 컴포넌트2import gradio as grwith gr.Blocks() as app: with gr.Row(): btn1 = gr.Button("A") btn2 = gr.Button("B") btn3 = gr.Button("C")app.launch()import gradio as grwith gr.Blocks() as app: with gr.Row(equal_height=True): text = gr.Textbox() btn2 = gr.Button('입력')app.launch()두 개의 컴포넌트 높이가 ..

그라디오는 사용자가 UI 를 빠르게 제작하여 ML이나 API 등을 사용할 수 있도록 해 주는 파이썬 오픈소스 패키지이다.https://www.gradio.app/ GradioBuild & Share Delightful Machine Learning Appswww.gradio.app 1. 설치하기!pip install gradio2. 그라디오 실행하기import gradio as grdef user_greeting(name): return "안녕하세요! " + name + "고객님 헤이마트에 오신 걸 환영합니다."app = gr.Interface(fn=user_greeting, inputs="text", outputs="text")app.launch()실행화면:3. 인터페이스(Interface)인터페이스..
1. openai 패키지 설치하기!pip install openai2. 코랩의 환경변수에 API 키 등록import osfrom getpass import getpassos.environ['OPENAI_API_KEY'] = getpass()OS는 운영체제 인터페이스를 다룰 수 있는 모듈이다. OS에는 환경 변수를 불러오는 os.environ 코드가 있고 이는 dict 타입의 구조처럼 key와 value 쌍으로 이루어져 있으므로 dict 처럼 key와 value 값을 지정하고 삭제할 수 있다.getpass는 입력한 값을 감추는 모듈이다. getpass() 함수는 실행 시 input() 함수처럼 사용자의 입력을 받을 때까지 기다렸다가 사용자의 입력이 완료되면 그 값을 변수에 대입하는 기능을 가졌다. 하지만 ..
GSAP의 ScrollTrigger는 스크롤에 반응하는 애니메이션을 쉽게 만들 수 있도록 도와주는 플러그인입니다. 주요 속성을 정리하면 다음과 같습니다.1. 기본 속성1️⃣ trigger설명: 애니메이션을 트리거할 요소 지정예시:gsap.to(".box", { x: 500, scrollTrigger: { trigger: ".box" }});2️⃣ start & end설명: 애니메이션이 시작(start)하고 끝나는(end) 스크롤 지점 설정형식: "트리거 위치 트리거 대상" ("startPosition startTrigger")기본값: "top bottom" (뷰포트의 아래쪽에서 트리거 요소의 위쪽이 보일 때 시작)예시:scrollTrigger: { start: "top 80%", // 요..