[Pynecone] 4.basic Googletrans

Pynecone basic googletrans,🐱‍👤

파인콘 Docs 예제 중 고급 번역기 예제를 따라하면서 문제점이 많아 Basic 단계의 번역기 제작부터 다시 기본기를 다져야할 것 같았다.

아래 공식문서에서는 Custom Vars(Class Translation)를 이용한 예제로 풀려있으나 간단하게 풀 수 있도록 제작해봤다 :)

① Pynecone Cusotm Vars 예제 파인콘-Custom vars 예제

inline style 중 props 형태로 재사용이 가능하게 실습도 진행하였다

input_style = {
    "width" : "120%",
    "background_color" : "black",
    "color" : "yellow",
    "border" : "2px solid steelblue",
    "border_radius" : "10px",
}

def index():
	return pc.container(
    	pc.vstack(
        	pc.input(
            	placeholder="input",
                on_blue = ....,
                style=input_style,    ← input_style 을 props 형태로 받아옴
            )
        )
    )

스타일, 코드 및 기능을 넣은 전체 코드

input_style = {
    "width" : "120%",
    "background_color" : "black",
    "color" : "yellow",
    "border" : "2px solid steelblue",
    "border_radius" : "10px",
}

class State(pc.State):
    input_text: str = ""
    trans_text: str = ""

    def translate(self):
        self.trans_text = googletrans.Translator().translate(self.input_text, dest="en").text

def index():
    return pc.container(
        pc.vstack(
            pc.input(
                placeholder="input",
                on_blur=State.set_input_text,
                style = input_style,
            ),
            pc.button(
                '번역',
                on_click= State.translate,
            ),
            pc.text(
                State.trans_text,
                font_size="1.5rem",
                font_family="Silkscreen",
            ),
            margin="2em",
        ),
        pc.vstack(
            pc.code_block(
                """
                import pynecone as pc
                import googletrans
                
                input_style = {
                    "width" : "120%",
                    "background_color" : "black",
                    "color" : "yellow",
                    "border" : "2px solid steelblue",
                    "border_radius" : "10px",
                }

                class State(pc.State):
                    input_text: str = ""
                    trans_text: str = ""

                    def translate(self):
                        self.trans_text = googletrans.Translator().translate(self.input_text, dest="en").text

                def index():
                    return pc.container(
                        pc.vstack(
                            pc.input(
                                placeholder="input",
                                on_blur=State.set_input_text,
                                style = input_style,
                            ),
                            pc.button(
                                '번역',
                                on_click= State.translate,
                            ),
                            pc.text(
                                State.trans_text,
                                font_size="1.5rem",
                                font_family="Silkscreen",
                            ),
                            margin="2em",
                        ),
                    )
                """,
                language="python",
                show_line_numbers=True,
                theme="dark",
                wrap_long_line="True", # 긴줄 아랫줄로 넘기기
            ),
        )
    )

app = pc.App(state=State)
app.add_page(index, title="index")
app.compile()

② googletrans 라이브러리 오류 해결방법

그리고 Googletrans 라이브러리 사용하면서 대응해야 할 문제점이 하나 있었는데, 바로 googletrans 버전 문제이다.

"NoneType" object has no attribute 'group' stackoverflow

 오류 해결 방법
pip uninstall googletrans
pip install googletrans==3.1.0a0