Q. can i create sticker effect on my transparent png file (putting a stroked white outline around each non-transparent element in my png) by javascript?
두근! 가능하다는 지피티쨩프로그래밍까지...
심지어 프로그래밍 해달라고도 안했는데 알아서 해주는 센스.
자바스크립트보다 파이썬이 더 테스트하기 쉬울거같아서 파이썬으로 다시 짜달라고 했다.
오 쉣....
오 쉣.......
이게 아니잖아 프로그래머야
그래서 코더인 나는 지피티에게 한번 더 명령했다.
이번엔 파이썬으로 짜달라고.
갑자기 코드가 개짧아졌다.
갓 Pillow. 진짜 갓 pillow.
이모티콘 자동화 프로그램 파이썬 버전도 pillow 로 했지.
어쩐지 짧아졌다 했더니 이 미친놈 진짜 테두리를 추가한거였다ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
메모리를 낭비하고 싶지 않다면 코드를 잘 읽고 복붙하도록 하자
근데 이러려고 우리 제피러스 G14 쟝 산거잖아
낭비해도 돼 나는
말을 못알아듣는거 같길래 프롬프트를 좀 수정해준다.
create sticker effect on my transparent png file (putting a stroked white outline around (each non-transparent element) in my png) with python. leave the original non-transparent part, just add white border around non-transparent element.
음 이새;끼 끝까지 못알아듣는다.
이럴땐 직접 코드를 보고 고치는 방법밖에 없다. (프롬프트를 더 수정하던가)
지금 보니까 # Add a white border around the pixel part again. 부분에서 계속 잘못된다.
그리고 내가 내일 결론:
이새1끼는 border 라는 말을 못알아듣는다.
그렇다면?
create ((sticker effect)) on my transparent png file
1. check for the transparent pixels.
2. if transparent pixels has non-transparent pixels within 5px range, change the transparent pixels into white pixel.
file name is IMG_5339.png
write python code.
아예 border라는 단어를 없애고 수학적으로 적으면 되지 않는가.
반경 5px이내에 불투명한 픽셀이 있다면 투명한 부분을 하얀색으로 바꿔달란 뜻.
결국엔 5px짜리 하얀 테두리가 만들어지는거다.
그렇다. 계속 지피티가 한 단어를 못알아들어서 실수를 한다면 그 단어를 없애면 되는거다.
from PIL import Image
# Open the input image and convert it to RGBA format
input_image = Image.open("IMG_5339.png").convert("RGBA")
# Get the dimensions of the input image
width, height = input_image.size
# Create a new output image with the same dimensions
output_image = Image.new("RGBA", (width, height), (255, 255, 255, 0))
# Loop over each pixel in the input image
for x in range(width):
for y in range(height):
# Get the RGBA values for this pixel
r, g, b, a = input_image.getpixel((x, y))
# If the pixel is transparent and there is a non-transparent pixel within 5 pixels,
# change the pixel to white
if a == 0:
for dx in range(-5, 6):
for dy in range(-5, 6):
if dx == 0 and dy == 0:
continue
nx = x + dx
ny = y + dy
if 0 <= nx < width and 0 <= ny < height and input_image.getpixel((nx, ny))[3] > 0:
r, g, b, a = 255, 255, 255, 255
break
# Set the pixel in the output image
output_image.putpixel((x, y), (r, g, b, a))
# Save the output image
output_image.save("IMG_5339_sticker.png")
정작 순수 코딩 시간은 얼마 되지 않지만 그래도 몇달간 걸쳐서... 다른것도 하면서 삽질한 결과물이다.
어쩌다보니 웹개발 삽질을 하고 있는데 진로에 대한 생각을 다시 한번 해봐야 할거 같다...
방학땐 웹 말고 다른쪽도 공부해서 관련 대회같은거 나가볼 생각이다.
뭐든지 창업 아이템 만들고 싶은거 있으면 자체개발 가능할때까지 웹개발 삽질하다가 취업은 AI쪽으로 하는게 목표다.
아직 시작도 안했지만 저거도 웹개발마냥 삽질하고 학교에서 수업 들으면 뭐라도 되겠지.
PYQT5
Python으로 작성한 코드를 Pyqt5 GUI로 구현하여 exe 파일로 배포하려고 했다.
그러나 이 프로그램은 많은 사람들에게 배포해야 하는 특성상, 유지보수의 어려움과 OS 차이로 인한 배포의 어려움이 있었다. 그래서 나는 Flask 프레임워크를 사용하여 웹 앱으로 배포하기로 결정했다.
앞으로 이어질 개 미친 삽질을 상상도 하지 못한 채...
Flask
Flask 에는 문제가 있었다.
1. 일정 기간이 지나면 돈을 내고 deploy를 해야한다. 2. Flask app을 deploy 할 수 있는 곳이 많이 없다. 3. 로컬 repository에 쉽게 접근할 수 없다는 문제가 있었다.
4. 서버 측에서 파일을 저장해야 한다.
사실 클라이언트 측에서 파일을 저장할 방법도 있을 거라는걸 안다.
하지만 나는 진행하고 있는 수많은 다른 프로젝트들 (클래스 101, GPT api, 수많은 창업경진대회, 인턴 지원, 학교 숙제...)로 인해 너무 지쳐있어서 그렇게 복잡한 코드도 아닌데... 그냥 지금까지 했던거 다 버리고 Javascript로 다시 만들자고 결심했다.
최종적으로 Flask로 개발한 웹 앱을 JavaScript로 다시 개발하기로 결정했다.
Flask 앱에서 JavaScript로
나는 Flask 앱을 JavaScript로 전환하기 위해 JSZip 라이브러리, saveAs 함수 및 Canvas API를 사용하여 Python에서 사용했던 PIL 및 request 모듈 등을 대체했다. Flask와 달리 파일을 디렉토리에 저장하지 않았고 대신 브라우저에서 임시 파일로 처리했다.
Python 코드에서 파일을 저장하는 방식은 서버 측에서 이루어지며, 일반적으로 파일 시스템(file system)을 사용하여 서버 측에 파일을 저장한다. 그러나 JavaScript 코드에서 파일을 저장하는 방식은 클라이언트 측에서 이루어지며, 일반적으로 브라우저의 로컬 스토리지(local storage)나 쿠키(cookie)를 사용하여 클라이언트 측에 파일을 저장한다.
JavaScript로 개발한 웹 앱의 장점
JavaScript로 개발한 웹 앱은 Flask로 개발한 앱보다 몇 가지 장점이 있다.
1. 클라이언트 측에서 파일을 저장하기 때문에 서버 측에서 파일을 저장하는 것보다 더 안전하다. 2. 클라이언트 측에서 파일을 처리하기 때문에 서버 측에서 파일 처리를 하지 않아도 된다. 이것은 서버 리소스를 절약할 수 있는 장점이 있다. 3. JavaScript는 브라우저에서 실행되기 때문에 Flask와 같은 백엔드 프레임워크보다 더 많은 환경에서 실행할 수 있다.
그래서 내 이모티콘 자동 편집기는 어디에 있는데요
시험기간이라서 아직 CSS 만질것도 있고 해서 아직 웹상에 배포는 안했다.
5월 12일이 종강이다.
종강하면 이모티콘 만드는 강의랑 이모티콘 자동화 툴과 함께 돌아오겠다.
그리고 인턴 최종합격이 하나하나씩 되고있다.
방학때는 인턴일기를 그릴 예정이다.
한국 인턴보다 월급은 적지만 월급 외로 벌고 있는것들도 많고 최대한 일 많이 시키고 많이 배울수 있는곳에 가는게 목표이기 때문에 월급을 어찌되든 상관 없다. (사실 월급 외로 버는것들이 월급보다 몇배로 많아질 예정이다...)
진짜 팀 모아서 프로젝트 해보니까 팀 프로젝트 진행속도랑 개인 프로젝트 진행속도랑 차이가 너무 심하게 나는게 실감났다. 팀 프로젝트는 사람이 많고 개발할 사람이 많아서 빠른걸수도 있는데 그거랑 별개로 팀이라 무조건 미루면 안된다는 압박감이 날 개발하게 만들었다... 사업계획서도 마찬가지고...
방학때 주말마다 새로운 앱 하나씩 출시하고 빠르게 시장 확인하는게 목표다.
뭐 보고 생각났냐면 liner CEO EO 인터뷰 보고 ㄹㅇ 1주일당 앱 하나씩 개발했다길래
어? 이거 우리 팀도 가능한데? 싶어서 아예 개발만 intense 하게 하는 팀 모아서 같이 개발하고 시장테스트 할 예정이다.
개발 할때마다 사업계획서를 적을 예정이라 사업계획서만 따로 적어줄 사람이 있으면 좋은데... 이건 모르겠다.
없으면 내가 적지 뭐 새로 가르치는것도 귀찮고
홍콩으로 인턴 하러 돌아가기 전에는 한국에서 창업 멘토링을 받으러 다닌다.
지원사업에 합격했다.
그리고 이건 나중에 인스타에 공지할건데 27일 28일 인사동 쌈지길에서 인스타툰 부스를 연다.
그리고 6월에는 클래스 101 강의가 런칭된다.
며칠전엔 남자친구랑 100일이었다.
절대적 시간과 상대적 시간에 대한 토론... 사실 토론이라고 하기엔 내가 헷갈렸던건데 여튼 시간에 대한 이야기를 했다.
인간의 언어로 수식을 설명하면 LaTeX 로 변환시켜주고 수식 png 파일까지 제공해주는 웹페이지와 익스텐션을 개발하자.
개발동기
라텍스가 익숙한 사람은 그냥 코드쓰듯이 라텍스를 쓰면 되지만
처음 블로그 시작한 고등학생이나 많이 안써본 사람들은 라텍스를 일일히 입력하는게 힘들다.
챗지피티에게 수식을 설명하면 라텍스로 변환시켜준다는것을 발견했다.
이 기능을 이용해서 gpt api를 사용한 크롬 익스텐션/웹사이트를 개발해보기로 했다.
기능 설명
이 웹 페이지는 HTML, CSS 및 JavaScript를 사용하여 구축되었습니다. HTML 코드는 입력 상자, "변환" 버튼 및 이미지와 다운로드 버튼이 표시되는 출력 영역을 포함하여 페이지의 기본 구조를 정의합니다. CSS 코드는 페이지를 스타일링하고 시각적으로 매력적으로 만들기 위해 사용됩니다. JavaScript 코드는 응용 프로그램의 논리를 처리하며, 입력 텍스트를 LaTeX로 변환하기 위해 GPT API를 호출하고, 그런 다음 LaTeX를 다운로드 가능한 이미지 파일로 변환하기 위해 Math API를 호출합니다.
구현해야할 기능
웹
1. UI elements
채팅 입력창
LaTeX 결과 나오는곳
수식 이미지 나오는곳
수식 이미지 저장하는 버튼
2. functions
[총 구현기능]
입력 받은 채팅을 ChatGPT API Input으로 넣는 기능
ChatGPT API에서 나온 결과에서 LATEX만 추출하는 기능
추출한 LATEX를 실제 수식으로 바꾸는 기능
실제 바꾼 수식을 이미지로 바꾸는 기능
[1차구현 목표]
채팅을 입력 받아 ChatGPT에 나온 결과를 그대로 사용자에게 보여주기
[최종 구현목표]
ChatGPT에 나온 결과를 전처리를 하여 원하는 부분만 추출,가공하여 원하는 파일 형태로 만들기
$$를 사용.
[부가 구현 목표]
음성인식을 ChatGPT에 입력할 텍스트로 바꾸기(구글 스피치 활용)
익스텐션
1. UI elements
채팅 입력창
LaTeX 결과 나오는곳
2. functions
입력 받은 채팅을 ChatGPT API Input으로 넣는 기능
ChatGPT API에서 나온 결과에서 LATEX만 추출하는 기능
마일스톤
헤커톤이 목표이기 때문이 1주일 안에 모든걸 완성해야 한다.
프로젝트 타임라인
사용할 프레임워크
React 를 사용하기로 했다.
React
Vue
Language
JavaScript
JavaScript
Architecture
Component
Component
Size
Small
Smaller
Learning
Steep
Easy
Performance
Fast
Faster
Data Binding
One-way
Two-way
React 와 Vue 비교:
React와 Vue 모두 JavaScript 기반의 컴포넌트 아키텍처를 사용하지만, React는 학습 곡선이 높고 성능이 뛰어나며, Vue는 학습이 쉽고 크기가 작습니다. React는 단방향 데이터 바인딩을 사용하고 Vue는 양방향 데이터 바인딩을 사용합니다.
수식 투명 PNG 파일을 만들기 위한 프레임워크로는 React나 Vue 모두 사용할 수 있습니다. 다만, React는 학습 곡선이 높기 때문에 Vue가 더 쉽게 접근할 수 있을 것입니다. 하지만, 수식 투명 PNG 파일을 만드는 것은 복잡한 작업이므로 React의 성능이 더 뛰어나기 때문에 React를 사용하는 것이 더 나은 선택일 수도 있습니다.
