Unsloth 웹 기반 모델 트레이닝 프로그램 (운영법/버그)

업데이트 중입니다. 설치  최근 AI 관련 프로젝트 전용 SSD를 추가로 장착하여 C: 경로에 있던 Unsloth를 삭제하고  E: 경로에 재설치하려고 했는데 여전히 공간을 많이 차지 하고 있었다. Unsloth docs에 나와있는 Uninstall 방법은 프로그램만 삭제되고 프로그램을 통해 다운받은 모델 파일은 삭제되지 않는다.   WSL로 설치했을 경우 {home}/.cache/huggingface/에 다운로드 받은 모델들이 저장되어있다. Uninstall 할 때 참고. 버그 2025.5.2 버전으로 업데이트하고나서 한/중/일어가 <textarea>에 입력되지 않는 현상 발생. https://github.com/unslothai/unsloth/issues/5318 일본어 입력이 안 된다고 이슈가 생겼고 같은 IME이슈라 생각해서 나도 한국어 입력 테스트와 환경 정보를 제공했다. 영자와 달리 한국어/중국어/일어의 경우 여러 영자 입력 조합으로 글자가 완성된다. 이들은 영자와 달리 키 하나에 1:1 대응이 안 되므로 먼저 buffer에 저장한 뒤 조합이 완성되면 문자를 input으로 출력한다.  한/영 전환 키를 눌렀을 때부터 입력이 되지 않았다. <한영전환> KeyboardEvent isTruste:true, key:HangulMode, code:'Lang1' <영문 입력> KeyboardEvent isTrusted:true, key: 'k', code: 'KeyK' <한글 입력> TextEvent > textinput isTrusted:true, data: 'ㅎ' key: Process   12시간도 안돼서 수정되었다. https://github.com/unslothai/unsloth/pull/5327 FE > unsloth / studio / frontend /src / components / assistant-ui /thread.tsx 의  9...

CSS 가상 클래스 대 가상 요소

가상 클래스 (  element: ) pseudo-class 요소에 특정한 이벤트 마다 스타일을 적용할 수 있는 키워드다. 즉, 스타일을 동적으로 입힌다. display: block display: none 처럼  가상 class show를 적용해서 조직으로 변할 때 배치 영향 받지 않게 구성한다,. 가상 요소 / 가상 Element (  element:: ) pseudo-element 요소의 특정한  부분 에 새 컨텐츠를 추가하거나, 선택하는 키워드이다. CSS1, 2 에서는 콜론 :이었으나  CSS3에서 가상 클래스와 구분하기 위해 ::로 표기한다.

구글 Gemma Python 라이브러리 설치 시, OSError 오류 해결법

이미지
구글에서 배포한 Gemma4 경량 모델을 파인튜닝하기 위해 로컬에 환경 구축을 하다가 생긴 에러를 해결하였습니다. 배경 구글에서 배포한 gemma 라이브러리는 gemma 모델을 활용할 뿐 아니라 튜닝하고, 테스트하고, 체크포인팅하는 등 연구용으로 적합하게 사용할 수 있도록 다양한 라이브러리를 포함하고 있다. gemma가 포함하고 있는 오픈소스 라이브러리 중 orbax은 모델 체크포인팅, optax는 Gradient 작업과 관련된 연산, kauldron은 머신러닝 모델을 학습시키기 위한 라이브러리다. JAX라는 파이썬 고성능 수치계산 라이브러리를 알아둘 필요가 있다. gemma가 포함하고 있는 라이브러리들이 JAX에 기반하고 있기 때문이다. 경쟁 라이브러리에는 PyTorch, Tensorflow가 있다.    orbax는 orbax-checkpoint, orbax-export 라는 orbax 네임스페이스를 가진 다른 라이브러리로 이뤄져있다. 본론 Python 버전 3.11 이상 이어야 하기 때문에  Python 3.13의 가상환경에 설치하는데 다음과 같은 에러가 발생했다. [orbax-checkpoint]ERROR: Could not install packages due to an OSError: [Errno 2] No such file or directory: 'e:\\Users\\...\gemma\\.venv\\Lib\\site-packages\\orbax\\checkpoint\\experimental\\v1\\_src\\testing\\compatibility\\checkpoints\\v0_checkpoints\\composite_checkpoint\\checkpoint_metadata_missing\\pytree_checkpointable_has_metadata\\state\\d\\ea2cd2503f2fab2439cfe73cda290980' HINT: This error might have occurred since this sy...

같은 코드, 다른 기기에서의 뷰포트

이미지
HTML/CSS/JS가 웹 브라우저에서 동작할 때 내 PC와 연결된 디스플레이에서는 정상적인 비율로 나오는데  다른 기기와 연결된 디스플레이에서는 멋대로 비율이 바뀐다던가, 여백 공간이 남는 등의 현상이 발생하고는 한다. 대부분 내 PC와 그 다른 기기의 브라우저 환경이 다르기 때문에 발생한다. 1. 사용자 인터페이스가 다르다. 2. 웹 브라우저 소프트웨어가 다르다. 사용자 인터페이스 차이 예를 들어, PC와 셋톱박스(STB)를 각각 동일한 모니터에 연결한다 했을 때 다음과 같은 두 쌍의 인터페이스가 생성된다. MONITOR-PC = 마우스, 키보드 (스크롤 등으로 무한히 확장 가능한 화면) MONITOR-STB = 모니터, TV (고정된 화면) 사용자 인터페이스가 다르기 때문에 뷰포트 overflow 시, pc 브라우저는 스크롤바, STB 브라우저는 ghost space를 패딩하여 보여준다. 웹 브라우저 소프트웨어 차이 때문에 셋톱박스에서 웹뷰어 프로그램을 사용하여 웹 페이지를 띄운다면 그 웹뷰어 프로그램이 어떤 프로그램의 어떤 버전 기반인지 추적해야한다. 예를 들어, 어떤 A라는 STB의 웹뷰어 프로그램은 Android System WebView는 Google Chromium 기반이며 버전은 Chromium 95.0.4638.74 임을 기록해두는 것이 좋다. 폰트 또한, 폰트 사용에도 유의해야한다. CDN 방식으로 네트워크를 타고 폰트를 다운로드 하는 프로그램이라면 네트워크 구성에 따라 CDN 주소가 막혀서 해당 기기의 기본 폰트가 나올 수도 있기 때문이다. 때문에 설정한 폰트가 제대로 렌더링 되는지 개발자 도구의 computed > rendered fonts에서 직접 확인해줘야한다. 스타일 시트에 폰트 이름이 나온다고 렌더링 되는 것이 아니다. 브라우저 자체 웹 폰트의 경우 클라이언트 프로그램에서 이미 폰트 파일을 가지고 있으므로 네트워크 트래픽이 발생하지 않는다. 서비스하고 있는 제품의 웹 서버에 폰트를 이미 다운로드 해 뒀다면 C...

LCD vs LED vs OLED

옥외 디지털 광고 집행을 위한 필수 구성 요소 디스플레이의 차이에 대해 정리했습니다. 출처는 삼성 디스플레이 뉴스룸. https://news.samsungdisplay.com/ LCD = Liquid Crystal Display LCD에도 여러 타입이 있지만 아래 설명은 기본 타입으로 설명하고 '전압을 가하지 않은 상태에서 빛을 투과시키'는 타입이다. 디스플레이에 출력되는 영상은 " 밝기 "와 " 색 "으로 표현된다. Liquid Crystal, 이하 액정은 액체처럼 유동성을 가지면서 고체처럼 규칙적인 배열을 가진 물질이다. 액정 은 - 빛을 통과시킨다. - 전기 자극을 주면 상태가 변한다. 액정은 " 빛의 투과 정도 "를 조절해서 "액정 표시 장치"라고 불린다. BLU , 이하 백라이트 유닛에서 나가는 빛을 액정의 배열 방식에 따라 통과시키고 그 양을 조절해 디스플레이의 "밝기"와 "색"을 표현한다. LCD는 다음과 같은 계층으로 이루어져있다. ( BLU > 편광판 > TFT > 액정&컬러필터 > 편광판 > 윈도우 ) LCD는 LED와 달리 "스스로 빛을 발하지 않는다." BLU의 백색빛을 이용한다. 백라이트 빛이 편광필름을 통과하면 빛에 방향성 이 부여된다. 액정은 이 방향성이 있는 빛으로 필요한 만큼만 픽셀에 도달할 수 있게  투과되는 빛의 양을 조절한다. 투과된 빛은 컬러필터를 지나면서 색을 표현한다. TFT로 액정을 비트면 빛도 비틀어진다. <TFT> TFT는 박막 트랜지스터 이며 반도체로 이뤄진 전자회로 다. 전류의 흐름을 조절하는 역할을 하며 1.기판 위 전류가 흐를 수 있게 액티브 층 형성 2. 게이트 전압 조절을 통해 source -> drain 으로 전자를 이동시킨다. TFT를 통과한 전류는 LCD의 경우 "액정을 회전시킨다". 즉...

옥외 광고 vs DOOH vs PDOOH

광고 업계 용어 간단 정리. 옥외 광고  옥외 = 건물 밖 광고가 이동하든 고정되어있든 상관없이 건물 밖에 설치하여 많은 사람들에게 노출시키는 광고물. 풍선, 전신주에 붙는 판촉물, 네온 사인 전광판, 미디어 월 등 형태는 다양하다. DOOH = Digital out of home 옥외의 광고이지만 디지털 디스플레이를 활용한 광고가 해당됨. 옥외 광고보다 범위가 좁다. PDOOH = Programmatic Digital out of home 옥외 디지털 디스플레이 광고인데 프로그래밍 로직이 결합된 형태. 단순히 영상을 송출하는 것이 아니라 스케줄링, 추천, 상호작용을 하기도 하고 광고 송출 통계를 기록하기도하고  심지어 광고 등록, 집행까지 할 수 있게 만든 형태. 

Python httpx readtimeout 사례 & 해결법

파이썬의 비동기 http 클라이언트 라이브러리 Httpx에서 발생하는 readtimeout은 HTTPError > TransportError > TimeoutException의 하위 Timeout Exception이다. httpx.TimeoutException은 timeout 에러의 Base class이며 시간 내에 작업이 수행되지 않았을 때 발생한다. Timeout에 해당하는 예외처리 중에 보다 세부적인 케이스로 ConnectTimeout : host에 연결하는 도중 Timeout ReadTimeout      : host로부터 데이터를 받는 도중 Timeout WriteTimeout      : host로 데이터를 보내는 도중 Timeout PoolTimeout       : pool로부터 connection을 얻으려고 대기하는 도중 Timeout 가 있다. Agent를 개발하면서 LLM API를 호출할 때 ReadTimeout을 많이 겪게 된다. host인 LLM API 서버로부터 응답을 기다리다가 발생하는 것인데 host와 client ( https client ) 둘 다 튜닝이 필요하다. host에서는 응답 데이터를 압축한다던가 응답 토큰 수에 제약을 두는 방법을 적용하고 client에서는 https client의 readtimeout 스레시홀드를 늘리는 방법이 유효하다. 다만 client의 readtimeout을 무한정 늘리면 양측에 열린 connection이 계속해서 자원을 점유하기 때문에 LLM API의 응답 데이터를 제한시키는 것이 좋다.  

이 블로그의 인기 게시물

Blogger 커스터마이징 : CSS 수정 (sticky-header)

노마드코더 개발자북클럽 Clean code 완주, 독후감

노마드코더 개발자북클럽 Clean code TIL 7 : 7장. 오류 처리