Django의 자동 번역 기능이 있는 간단한 Shoutbox

이 자습서에서는 자동 번역이 있는 설명 상자를 만듭니다. 사용자는 메시지를 입력할 수 있으며 이 메시지는 다른 언어로 다른 사용자가 읽을 수 있습니다. 우리는 Azure Cognitive Services의 웹앱 및 Translator API에 Django를 사용합니다.

메시지를 번역 서비스에 직접 보내고 결과를 데이터베이스에 저장합니다. 따라서 웹사이트 번역 서비스와 달리 API는 모든 페이지 요청에 적중되지 않습니다. 이를 통해 방문자의 정보를 최대한 보호할 수 있습니다.

Azure에 가입

시작하기 전에 활성 Azure 계정이 필요하고 번역 서비스를 만듭니다. 아직 Azure 계정이 없는 경우 내 게시물Getting Started with Azure에서 무료 계층에 대한 모든 정보를 찾을 수 있습니다.

Azure Portal에 로그인하면 다음과 같이 번역 서비스를 쉽게 만들 수 있습니다.

설정

babelbox_project라고 하는 빈 Django 프로젝트와 babelbox라는 빈 앱으로 시작합니다. django-crispy-forms 패키지를 사용하여 부트스트랩으로 양식의 스타일을 지정합니다.

설정에서 다음 세 가지를 정의해야 합니다.

The Crippy Forms 템플릿 팩(이 경우 bootstrap5)

타겟팅할 언어

Azure 번역 서비스에 대한 액세스 구성

settings.py 파일에 다음 줄을 추가합니다(AZURE_KEY 변수를 Azure에서 제공한 액세스 키로 대체해야 함).

CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
CRISPY_TEMPLATE_PACK = "bootstrap5"

TRANSLATED_LANGUAGES = (
    ('🇬🇧', 'EN', 'English'),
    ('🇪🇸', 'ES', 'Español'),
    ('🇫🇷', 'FR', 'Français')
)


AZURE_KEY_1 = "<>"
AZURE_LOCATION = "global"
AZURE_ENDPOINT = "https://api.cognitive.microsofttranslator.com/"

모델 만들기

우리의 경우 메시지는 세 가지 속성으로만 구성됩니다.

메시지를 제출하는 사용자의 이름

메시지 자체

메시지 작성 언어

models.py 파일에서 이에 대한 간단한 모델을 생성해 보겠습니다.

class Message(models.Model):
    """This model represents the original user input."""
    class Meta:
        ordering =['-created_at']
    created_at = models.DateTimeField(auto_now_add=True)

    name = models.CharField(max_length=255)
    message_language = models.CharField(max_length=2, choices=((lang_id, flag) for flag,lang_id,_ in settings.TRANSLATED_LANGUAGES))
    message = models.TextField()

원본 메시지 외에도 번역을 저장할 모델이 필요합니다. 다음과 같이 TranslatedMessage 모델을 만들 수 있습니다.

class TranslatedMessage(models.Model):
    """This model contains the translated message."""
    class Meta:
        """Model Meta options"""
        unique_together = ['message', 'language']
    message = models.ForeignKey(Message, on_delete=models.CASCADE, related_name="translated_messages")
    language = models.CharField(max_length=2, choices=((lang_id, flag) for flag,lang_id,_ in settings.TRANSLATED_LANGUAGES))
    translated_message = models.TextField()

신호

신호는 Django 프레임워크에서 제공하는 유용한 기능입니다. 신호를 통해 발신자는 일부 작업이 수행되었음을 수신자 집합에 알릴 수 있습니다.
이러한 작업 중 하나는 모델 인스턴스를 데이터베이스에 저장하는 것일 수 있습니다. 이 경우 receiver를 사용하여 새 메시지가 저장될 때마다 Azure 번역 서비스에서 번역을 요청할 수 있습니다.
signals.py는 다음과 같습니다.

@receiver(post_save, sender=Message)
def my_handler(sender, instance, **kwargs):
    target_languages = [lang_id.lower() for _,lang_id,_ in settings.TRANSLATED_LANGUAGES]
    request = requests.post(settings.AZURE_ENDPOINT + '/translate',
                            params={
                                'api-version': '3.0',
                                'from': instance.message_language.lower(),
                                'to': target_languages
                            },
                            headers={'Ocp-Apim-Subscription-Key': settings.AZURE_KEY_1},
                            json=[{
                                'text': instance.message
                            }])
    translations = request.json().pop().get('translations', [])
    for translation in translations:
        translation_object = TranslatedMessage(
            message=instance,
            language=translation.get('to').upper(),
            translated_message=translation.get('text')
        )
        translation_object.save()

모든 저장 이벤트에서 이 코드가 자동으로 실행되도록 하려면 앱 시작 시 signal.py 파일을 가져와야 합니다.ready에 있는 AppConfig에 babelbox/app.py 메서드를 추가하여 이를 달성할 수 있습니다. 이렇게 하면 파일이 로드되고 수신기가 등록됩니다. 다른 모든 것은 Django가 자동으로 처리합니다.

from django.apps import AppConfig


class BabelboxConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'babelbox'

    def ready(self):
        from . import signals

보기 및 템플릿

이제 우리의 shybox 앱을 위한 데이터베이스 디자인을 생성했으므로 이에 대한 뷰와 템플릿을 생성해야 합니다. 우리의 간단한 경우에는 두 가지 보기만 필요합니다.

모든 메시지(및 번역) 목록을 표시하는 인덱스 보기

새 메시지를 입력하는 양식을 표시하는 추가 보기입니다.

views.py 내에서 먼저 index 메서드를 정의합니다. 이 메서드는 모든 메시지 개체 목록을 가져오고 해당 목록을 템플릿에 전달합니다.

def index(request):
    messages = Message.objects.all()
    languages = settings.TRANSLATED_LANGUAGES
    return render(request, 'babelbox/index.html', dict(messages=messages, languages=languages))

다음으로 add를 처리하는 MessageForm 메시지를 만듭니다.

def add(request):
    form = MessageForm(request.POST or None)
    if request.method=="POST":
        if form.is_valid():
            form.save()
            return HttpResponseRedirect("/")
    return render(request, 'babelbox/add.html', dict(form=form))

물론 우리는 MessageForm 클래스 자체를 생성해야 합니다. 이는 가능한 한 쉽게 얻을 수 있습니다.

class MessageForm(forms.ModelForm):
    class Meta:
        model = Message
        fields = ['name', 'message', 'message_language']

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_id = 'id-exampleForm'
        self.helper.form_method = 'post'
        self.helper.form_action = '/add'

        self.helper.add_input(Submit('submit', 'Submit'))

최종 결과

GitHub 리포지토리

전체 소스 코드는 GitHub 저장소codewithbas/django-babelbox에서 검색할 수 있습니다.