[Pynecone] 3.Translator

Gallery-Translator

1.기초 설계

Translator 페이지를 참고하여 대략적인 기본 골격을 만들어 기능을 추가하는 방향으로 가기 위하여 기본 State 값과, Container 내부에 box, input, select, button component 틀을 만들었다.

↓ 기본 구조 틀이 제작되었고, 단계를 거쳐 수정/삭제되는 부분들이 생기니 참고만 할 것

class State(pc.State):
	text:str =""
    trans_text:str =""
    options:str = ['kr', 'us', 'jp']
    lang:str = 'kr'

def index():
	return pc.container(
      pc.box(
          pc.text("Translator"),
          pc.text("Translate things and post them as messages!"),
      ),
      pc.input(
          placeholder="Text to translate",
          on_blur = State.set_text # ← setter 사용하여 text state 값 변경
      ),
      pc.select(	# ← pc.select(배열, 트리거는 on_change 만 사용가능)
          State.options,  
          placeholder= "Select a language",
          value= State.lang,
          on_change= State.set_lang,	# Setter 를 이용하여 State.lang 변경
      ),
      pc.box(
          pc.box(
              pc.text("OUTPUT"),
          ),
          pc.text("Translations will appear here.")
      ),
      pc.button(
          "Post",
          on_click= ~~~~
      )
)

pc.box
A generic container component that can contain other components.
다른 구성 요소를 그룹화하여 사용할 수 있는 일반 컨테이너 구성요소이다.

• Props
  • element ← 태그명
  • src ← 링크
  • alt ← 내용

pc.select
Select component is a component that allows user pick a value from predefined options.
Ideally, it should be used when there are more than 5 options, you might consider ussing a radio group instead.

※ Trigger on_change 만 사용 가능함

2. input component 구성

input component 는 번역이 필요한 문장을 작성할 수 있도록 하기 위하여 State(text) 값을 선언하였고 Event Trigger로 on_blur 를 사용하여 커서에서 벗어날 경우 State(text)값이 변경되도록 setter 를 사용하였다.

class State(pc.State):
	text:str = ""
    
def index():
  return pc.container(
      #input box
      pc.input(
          placeholder = "Text to translate",
          on_blur= State.set_text #Setter 사용
      ),
  )

3. Select componet 구성

select 컴포넌트는 번역할 언어 목록을 불러와 선택할 수 있도록 구성해야하며,
구조는 pc.select({list형태의 값}, ....)이며 on_change event trigger를 사용한다

class State(pc.State):
	lang:str = 'Korean'
	options:str = ['Korean', 'Japaness', 'English']
	
def index():
return pc.select(
	State.options, # ← 리스트 형태의 데이터를 가져옴
	value: State.lang, # ← State var to bind the select
	placeholder= "Select a language..",
	on_change= State.set_lang, # ←  Setter 를 이용하여 State.lang 값 변경 
	# default_value: , # ← The default value of the select
)

pc.select
Select component is a component that allows users pick a value from predefined options. Ideally, it should be used when there are more than 5 options, otherwise you might consider using a radio group instead.

5가지 이상의 선택이 존재할 경우 select component를 사용하고 아닌 경우 라디오 그룹를 활용해라;

4. Output componet & googletrans 함수 구성

output 컴포넌트에서는 두가지 작업을 진행하였다.

• googletrans python 라이브러리를 이용하여 번역
• 번역된 데이터 출력(pc.text)

↓ State.output 메서드 제작, output 출력 컨테이너 컴포넌트 기본 구조 설계

import pynecone as pc
import googletrans

class State(pc.State):
	text:str = ""
	optoins:str = ['kr', 'us', 'dk']
	lang:str = "kr"
	
	def output(self) -> str:
		if not self.text.strip():        # strip() 메서드, 앞 뒤 공백 제거
			return "Translation will appear here."
		translator  = googletrans.Translator().translate(self.text, dest=self.lang) 
		# translate(번역할 단어, src={번역할 언어, default auto}, dest={번역될 언어})
		
		return translator.text
	

pc.container(
	pc.box(
		pc.box(
			pc.text("OUTPUT"),
		),
		pc.text(State.output) # ← input에서 받은 값을 output 함수에서 translation 시킨 후 출력
	)
)

5. post button & History 출력

Post 버튼 on_click 시 Message(custom class var)에 original_text, trans_text, tile, ... 등 을 담아 messages list 에 담은 후 History 컴포넌트(pc.vstack > pc.foreach(State..messages, def_message)에 담아 가공한 후 출력한다

• pc.button()
• class Message(Base):
• def message(self) -> str:
• pc.foreach(State.messages, message)

from datetime import datetime
import pynecone as pc
from pynecone.base import Base
import googletrans


class Message(Base): #Customed Base var
	original_text: str
	text:str
	create_at:str
	to_lang:str
	
class State(pc.State):
	text:str = ""
	optoins:str = ['kr', 'us', 'dk']
	lang:str = "kr"
	messages:list[Message] = []  # 변수:타입 지정하는 것을 파이썬 타입 어노테이션이라고 함
								# list 타입이고 내부에 Message Bsae Var가 들어감
	
	
	def output(self) -> str:
		if not self.text.strip():        # strip() 메서드, 앞 뒤 공백 제거
			return "Translation will appear here."
		translator  = googletrans.Translator().translate(self.text, dest=self.lang) 
		# translate(번역할 단어, src={번역할 언어, default auto}, dest={번역될 언어})
		
		return translator.text
	
	def post(self):
		self.messages = [
			Message(
				original_text= self.text,
				text= self.output,	# output 메서드에서 받은 리턴값(번역 값)을 넣을 것
				create_at= datetime().now(),
				to_lang=self.lang,
			)
		] + self.messages  # + self.message를 넣는 이유는 기존 list(Message) 값에 더해주기 위해서
	
def index():
return pc.container(
	pc.box(
		pc.text("Translator emoji", font_size="2rem"),
		pc.text("Translate things and post them as messages!"),
	),
	pc.input(
		placeholder="Text to translate",
		on_blur = State.set_text, #  ← [Event trigger] on_blur 사용하여 State.text 값을 변경
	),
	pc.select(
		State.options, # ← 리스트 형태의 데이터를 가져옴
		value: State.lang, # ← State var to bind the select
		placeholder= "Select a language..",
		on_change= State.set_lang, # ←  Setter 를 이용하여 State.lang 값 변경 
		# default_value: , # ← The default value of the select
	)
	pc.box(
		pc.box(
			pc.text("OUTPUT"),
		),
		pc.text(State.output) # ← input에서 받은 값을 output 함수에서 translation 시킨 후 출력
	)
	pc.text(
		"Translations will appear here.",
	),
	pc.button(
		"POST",
		on_click= State.post,
	),
	pc.vstack(
		# pc.foreach(...)
		pc.foreach(self.messages, message),
	)
)

6. 버그수정 및 최종본(작성중)

from datetime import datetime 
import pynecone as pc
from pynecone.base import Base
import googletrans


class Message(Base): #Customed Base var
	original_text: str
	text:str
	create_at:str
	to_lang:str
    
class State(pc.State):
	text:str = ""
	options:dict = {
        "Korean": "ko",
        "English": "en",
        "German": "de",
    }
	lang:str = "kr"
	messages:list[Message] = []  # 변수:타입 지정하는 것을 파이썬 타입 어노테이션이라고 함
								# list 타입이고 내부에 Message Bsae Var가 들어감
	
    def test(self) -> list:
        return self.options
        
	@pc.var
	def output(self) -> str:
		if not self.text.strip():        # strip() 메서드, 앞 뒤 공백 제거
			return "Translation will appear here."
		translator  = googletrans.Translator().translate(self.text, dest=self.lang) 
		# translate(번역할 단어, src={번역할 언어, default auto}, dest={번역될 언어})
		
		return translator.text
	
	def post(self):
		self.messages = [
			Message(
				original_text= self.text,
				text= self.output,	# output 메서드에서 받은 리턴값(번역 값)을 넣을 것
				create_at= datetime().now(),
				to_lang=self.lang,
			)
		] + self.messages  # + self.message를 넣는 이유는 기존 list(Message) 값에 더해주기 위해서

def message(message):
    return pc.box(
        pc.vstack(
            pc.text(message.original_text),
            pc.text(message.text),
            pc.box(
                pc.text(message.to_lang),
                pc.text(" · "),
                pc.text(message.create_at),
            ),
        ),
    )

def index():
    return pc.container(
        pc.box(
            pc.text("Translator emoji", font_size="2rem"),
            pc.text("Translate things and post them as messages!"),
        ),
        pc.input(
            placeholder="Text to translate",
            on_blur = State.set_text, #  ← [Event trigger] on_blur 사용하여 State.text 값을 변경
        ),
        pc.select(
            ["Korean", "English", "German"],
            #list(State.options.keys()), # ← 리스트 형태의 데이터를 가져옴
            value= State.lang, # ← State var to bind the select
            placeholder= "Select a language..",
            on_change= State.set_lang, # ←  Setter 를 이용하여 State.lang 값 변경 
        ),
        pc.box(
            pc.box(
                pc.text("OUTPUT"),
            ),
            pc.text(State.output) # ← input에서 받은 값을 output 함수에서 translation 시킨 후 출력
        ),
        pc.button(
            "POST",
            on_click= State.post,
        ),
        pc.vstack(
            pc.foreach(State.messages, message),
        ),
    )

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

7. 정리

• python, googletrans
• python, strip
• python, list
• python, *args **kargs