※ '파도'는 크레이의 '파이스크립트 도전기'의 줄임말입니다.
지난 게시글에서 연재되는 글입니다. : https://itadventure.tistory.com/559
파도(17) - 자바스크립트와 파이스크립트, 손잡다!
🍬 '파도'는 크레이의 파이스크립트 도전기의 줄임말입니다. 지난 게시글에서 연재되는 글입니다. https://itadventure.tistory.com/558 파도(16) - 파이스크립트의 특좌앙~점으로 머신러닝! 🐳 '파도'는
itadventure.tistory.com
오늘은 머리도 식힐겸 인공지능 분야가 아닌 다른 주제에 대해 다루어 보겠습니다.
인공지능은 무언가 잡힐듯 말듯, 좀 더 알아봐야할 부분도 있고 해서 말이지요 :)
캣 에스 어 서비스?
cataas.com 이라는 사이트에 대해 들어보신 적이 있으신가요?
뭐.. 들어보지 않았어도 상관은 없습니다.
고양이를 사랑하는 분이 앙증맞은 고양이 이미지를 제공하는 서비스인데요.
재미있는 것은 랜덤 고양이 이미지를 제공한다는 것이지요.
간단히 아래 URL을 방문하면 그 때마다 랜덤한 고양이 이미지를 볼 수 있고,
https://cataas.com/cat
게다가 아래 URL을 방문하면 그 때마다 랜덤한 움짤 이미지(움직이는 이미지)를 볼 수 있다는 점입니다.
https://cataas.com/cat/gif
오늘은 파이스크립트에서 이 이미지를 불러오는 부분을 진행하겠습니다.
소스부터 공개!
파이썬 코드를 파이스크립트로 가져와 실행하니 비로 에러가 나더라구요 ㅎ..
파이스크립트용으로 몇가지 외국 소스를 찾아 사용하기 쉽게 변형해 보았습니다.
소스는 비교적 짧은데요.
뭐 프로그램 언어를 처음 시작하시는 분에게는 많아 보이실지도 모르지만요 :)
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://pyscript.net/alpha/pyscript.css"
/>
<script
defer
src="https://pyscript.net/alpha/pyscript.js"
></script>
<py-env>
- paths:
- http://dreamplan7.cafe24.com/pyscript/craycommon.py
</py-env>
<style>
#고양이 {
padding:10px;
margin:10px;
border:5px solid black;
}
</style>
</head>
<body>
고양이 움짤 이미지<br/>
<div><img id ="고양이"></div>
<py-script>
from craycommon import *
import asyncio
import base64
이미지, 상태 = await download('https://cataas.com/cat/gif')
이미지64 = base64.b64encode(이미지).decode()
document.getElementById("고양이") \
.setAttribute(
"src",
f"data:image/gif;base64,{이미지64}"
)
</py-script>
</body>
</html>
이미지 파일을 다운로드하는 기능은 크레이의 홈페이지에 별도 모듈로 빼놓아 코드가 짧습니다.
관련 코드는 아래와 같으니 안정적으로 서비스하실 분은 본인의 사이트에 파일을 넣어 주세요.
craycommon.py 코드
from pyodide.http import pyfetch
import asyncio
from pathlib import Path
def createElementDiv(document, Element, name):
element = document.createElement('div')
element.id = name
document.body.append(element)
return Element(name)
async def download(url):
filename = Path(url).name
response = await pyfetch(url, method="GET")
if response.status == 200:
status = response.status
with open(filename, mode="wb") as file:
file.write(await response.bytes())
data = open(filename, "rb").read()
return data, status
else:
status = response.status
return '', status
그리고 웹페이지에 접속하시면 아래와 같이 내용이 매번 바뀌는 움짤 이미지를 보실 수 있습니다.
위 결과물은 크레이의 홈페이지에서도 확인해 보실 수 있습니다.
http://dreamplan7.cafe24.com/pyscript/pyimg.html
이번 예제의 습득을 원하신다면 아래 내용의 이해가 필요한데요.
좀 상세한 부분까지 들어가 보도록 하겠습니다.
외부 사이트 파이스크립트 사용
첫번째는 <py-env> 외부사이트 파일 사용하기 입니다.
<py-env> 태그에서 직접 만든 .py 파일을 불러올 때,
내 사이트 뿐 아니라 외부사이트도 사용 가능하다는 점입니다.
아래는 크레이의 사이트에서 craycommon.py 를 불러오는 부분인데요. ( 빨간색 )
다른 홈페이지에서 이 파일이 없어도 크레이의 홈페이지를 참조해서 불러오실 수 있다는 점이지요.
(티스토리 게시글에서도 테스트해보았습니다)
<py-env>
- paths:
- http://dreamplan7.cafe24.com/pyscript/craycommon.py
</py-env>
:
<py-script>
from craycommon import *
:
직접 py 파일의 URL 주소를 명시한 부분이 보이실 겁니다.
이 곳에 download(url) 라는 함수가 들어 있는데요. url 웹페이지에서 파일을 다운로드하여 결과를 반환해 주는 기능을 합니다.
이 파일을 외부 라이브러리처럼 사용하면 코드가 한결 간단해지지요.
download 함수의 사용법은 아래와 같습니다.
파일내용, 상태 = await download('URL주소')
기다려!, await
두번째는 await 입니다.
await 는 프로마이스니 콜백이니 어려운 용어 빼고 간단히 말해 기다려주는 기능입니다.
보통 파일 다운로드는 시간이 많이 걸릴 수 있기 때문에 다운로드가 끝날때까지 기다려 주어야 합니다.
그래서 이와 같이 기다려주는 기능을 사용하기 위해서는 아래 모듈을 사전에 선언해야 하는 것이지요.
import asyncio
파일 다운로드할 때는 아래와 같이 await 를 써주어야만 제대로 다운받은 파일 내용을 받아올 수 있습니다.
파일내용, 상태 = await download('URL주소')
고양이 이미지 서비스에서 움짤이미지를 다운받는 실제 코드는 아래와 같습니다.
이미지, 상태 = await download('https//cataas.com/cat/gif')
그러면 이미지에는 아래와 같이 내용이 들어있게 됩니다.
이게 무슨 내용일까요?
b'GIF89a\xc8\x006\x01\xf4\x00\x00...
위 내용은 그림파일이 컴퓨터에 보관되는 형태인데요.
앞의 GIF89a 는 그림파일의 버전을 나타냅니다.
그 뒤 내용은 정보처리에 대한 이론이 필요하지만,
여기서는 굳이 이해하지 않아도 되니 넘어가겠습니다. :)
base64인코딩 변환
세번째는 base64인코딩입니다.
위의 그림파일 데이터는 인터넷에서 사용자에게 직접 전달 할 수 없는데요.
그 이유는 MSB라고 불리는 최상위 비트를 항상 0으로 전달해야 하기 때문입니다.
실제 데이터는 8개의 정보를 한 묶음(byte)으로 해서 모든 데이터를 전달해야 하는데요.
| 비트0 | 비트1 | 비트2 | 비트3 | 비트4 | 비트5 | 비트6 | 비트7 |
| 0 또는 1 | 0 또는 1 | 0 또는 1 | 0 또는 1 | 0 또는 1 | 0 또는 1 | 0 또는 1 | 0 또는 1 |
인터넷 웹서비스는 기본적으로 데이터를 전달할 때 위의 한 묶음 중에서 비트0을 사용할 수 없습니다.
그 외에도 인터넷 구조상 사용할 수 없는 문자가 몇가지 더 있습니다.
그래서 인터넷에서 사용할 수 있도록 바꿔주는 것이 BASE64 인코딩인 것이지요.
앞에서 다운받은 이미지를 인터넷에서 사용 가능한 형태로 바꿔주려면 아래 코드를 사용합니다.
이미지64 = base64.b64encode(이미지).decode()
그러면 이미지64에 아래와 같은 결과가 입력됩니다.
이 데이터는 사람은 여전히 알아볼 수 없지만 다행히도 컴퓨터는 알아먹는 것이지요.
R0lGODlhkAHmAPcAAAD/ABIKEhcRGhgUHx...
이미지 태그에 base64 인코딩 데이터를 쏙!
이제 아래와 같이 사전에 준비해둔 css스타일과 <img> 태그가 있습니다.
<style>
#고양이 {
padding:10px;
margin:10px;
border:5px solid black;
}
</style>
:
<div><img id ="고양이"></div>
:
이 이미지 태그에 직접 내용을 갱신해주는 것이 바로 아래 태그인데요.
src 라는 속성에 f"data:image/gif;base64,{이미지64}" 라는 값을 넣어주게 됩니다.
document.getElementById("고양이") \
.setAttribute(
"src",
f"data:image/gif;base64,{이미지64}"
)
이중 앞 부분 data:image/gif;base64, 는 자료(data) 형태가 이미지(image)중 (gif) 파일이고,
base64 로 된 내용을 주겠다는 것이고,
그 뒤 {이미지64} 는 이미지64 변수에 들어 있는 값을 직접 넣는다는 의미입니다.
그래서 실제 이미지 주소는 아래와 같이 바뀝니다. 좀 특이하지요? 하지만 정상적인 사용법에 해당합니다.
<img id ="고양이" src="data:image/gif;base64,R0lGODlhkAHmAPcAAAD/ABIKEhcRGhgUHx...">
마무~리
오늘은 다른 외부사이트에서 만든 파이스크립트를 사용하는 방법과,
해당 파일을 이용하여 간단히 파일을 다운받는 법,
그리고 다운받은 파일을 BASE64인코딩하여 이미지 파일의 URL 주소에 넣는 방식으로
랜덤한 고양이 움짤 이미지를 보여주는 파이스크립트를 알아보았습니다.
아무쪼록 필요하신 분에게는 유용한 정보가 되셨기를 바라면서
오늘도 방문하시고 글 읽어주신 여러분께 감사드립니다.
월요일이지만 새로운 마음으로 힘찬 첫출발 되시길 바랍니다 :)
유용한 정보라면 공감 한방, 댓글은 베리 베리 굿잡!
감사합니다!
다음 게시글 : https://itadventure.tistory.com/561
파도(19) - 파이스크립트 동영상 재생! 근데 넘 느려요 ㅎ..
※ '파도'는 파이스크립트 도전기의 줄임말입니다. 지난 게시글에서 연재되는 글입니다. https://itadventure.tistory.com/560 파도(18) - 랜덤고양이 이미지 불러오기 ※ '파도'는 크레이의 '파이스크립트
itadventure.tistory.com
'코딩과 알고리즘' 카테고리의 다른 글
| 파도(20) - 동영상 얼굴인식 (2) | 2022.09.10 |
|---|---|
| 파도(19) - 파이스크립트 동영상 재생! 근데 넘 느려요 ㅎ.. (0) | 2022.09.05 |
| 파도(17) - 자바스크립트와 파이스크립트, 손잡다! (2) | 2022.08.20 |
| 파도(16) - 파이스크립트의 특좌앙~점으로 머신러닝! (9) | 2022.08.19 |
| 파이썬3 - 기초요약 (PDF 3페이지) (9) | 2022.08.15 |
