2024-05-20 AI 코딩 TIL

AI활용 특강!

AI 활용을 위해서 django에서 사용하는 방법을 배워 봅시다.

Overview - OpenAI API

튜터님께서 알려주신 open AI 에서 지원하는 AI기능들에 대해서 알려주셨습니다.

처음에 TTS, STT를 알아보면서 찾아보았던 부분이 였지만 이렇게도 사용을 할 수 있구나 라는 생각이 들었고,

만약에 지금 사용하는 부분에 저부분을 반영해서 사용을 할 수 있다면 좋을 것 같다는 생각이 들었습니다.

---

프로젝트 진행도

오늘은 AI음성인식 기능을 수정을 하게 되었는데.

지금까지 만들어 왔던 부분을 수정을 해서 처음부터 만들어야 하는 문제가 생겼습니다 ㅠㅠㅠㅠ

• 장고 프레임 워크 생성
  • app 생성 - accounts, menus, orders
  • model 생성 - user, menu, hashtag, order
• AI 기능
  • 기존의 STT, TTS의 입력 및 출력 방안 변경
  • 코드
  • 기존 입력 방법 (html상에서 마이크 on/off을 하고 views 상에서 마이크 입력을 받는 식으로 작성)

  • class AIbot(APIView):
        def post(self, request):
            ai_instance = AI()
            input_btn = request.data.get('input')  # POST 요청에서 'input' 값을 가져옴
            print(input_btn)
            if input_btn == 'on':
                ai_instance.input()  # 마이크 ON일 경우에만 입력 시작
            elif input_btn == 'off':
                ai_instance.stop_microphone()  # 마이크 OFF일 경우 마이크 중지
            return Response({"message": "AI 답변이 완료되었습니다."}, status=status.HTTP_200_OK)
    

  • 문제점 : 음성이 인식하고 생성이 되는 부분이 파이썬에서 이루어지기 때문에 탬플릿을 보고 있는 유저에게는 음성 메세지가 들리지 않는다는 문제점을 인식
  • 해결 방안 : html상에서 STT를 할 수 있는 webkitSpeechRecognition를 이용하여 음성인식을 해서 text를 생성하고 생성된 text를 데이터로 전송하여 opanAI의 결과 값을 다시 JsonResponse로 반환하여 음성으로 출력하는 방안으로 수정함

• •         const startButton = document.getElementById('startButton');
            const transcription = document.getElementById('transcription');
    
            // 음성 합성 함수
            function speak(text) {
                const synth = window.speechSynthesis;
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = 'ko-KR';
                synth.speak(utterance);
            }
    
            // 음성 인식 시작
            startButton.addEventListener('click', function() {
                // 음성 인식 API를 지원하는지 확인
                if (!('webkitSpeechRecognition' in window)) {
                    alert("음성 인식이 지원되지 않는 브라우저입니다.");
                } else {
                    const recognition = new webkitSpeechRecognition(); // 음성 인식 객체 생성
                    recognition.lang = 'ko-KR'; // 언어 설정 (한국어)
    
                    recognition.start(); // 음성 인식 시작
    
                    // 음성 인식 결과 이벤트 처리
                    recognition.onresult = function(event) {
                        const transcript = event.results[0][0].transcript;
                        transcription.textContent = transcript;
    
                        // 서버로 음성 데이터 전송
                        axios.post('{% url "orders:aibot" %}', { inputText: transcript })
                        .then(function(response) {
                            const responseText = response.data.responseText;
                            console.log('서버 응답:', responseText);
                            // 서버 응답을 음성으로 출력
                            speak(responseText);
                        })
                        .catch(function(error) {
                            console.error('에러:', error);
                        });
                    };
    
                    // 음성 인식 종료 이벤트 처리
                    recognition.onend = function() {
                        startButton.textContent = '음성 입력 다시 시작';
                    };
                }
            });
        

    class AIbot(APIView):
        def post(self, request):
            input_text = request.data.get('inputText')  # POST 요청에서 'input' 값을 가져옴
            message, category = bot(input_text)
            print(message)
            print(category)
            return JsonResponse({'responseText': message})
    

  • 추가 : openAI의 TTS 기능을 사용해 볼려고 했으나, 로직상의 오류 발견 및 API_KEY노출로 인하여 보류.
  • 간단한 테스트용 키오스크 탬플릿 생성 - kiosk.html
    • 엑시오스를 이용하여 자바스크립트에서 데이터를 json형식으로 전송할 수 있도록 구현

 

• 진행사항
  • 얼굴인식으로 나오는 결과 값을 받아오는 방법 조사 (numpy array) - 완료
    • 문제 : 고연령의 얼굴 인식의 차이가 너무 큼
    • 해결방안 :
    1. 현재 상황에는 변화하기에는 무리가 있으므로 현 상태로 사용
    2. 시연에서는 고령자 사진 예시를 잘 선택할 것 + model, detector의 어느 조합이 가장 정확한지 테스트해볼 것
    → views 조건 설정 : 나온 결과로 조건문 단계설정 / 전체적인 주문 흐름 설정
  • 음성인식 Django에 반영 문제 : 유저에게 보여지는 탬플릿에는 음성인식과 출력이 나오지 않을 수도 있다는 의문이 생김 해결 방안 : template 음성인식 및 음성 출력 > views.py 상에는 음성입력으로 받은 데이터 AI답변 생성
• 추가사항
  • 장바구니 기능을 조사하기 (캐쉬)
  • 키오스크 전체적인 흐름도 작성
  • 키오스크 간단한 템플릿 만들기 -> 메뉴 음성인식 설정을 수정해야 할 필요가 있음

이와 같은 문제점과 보완점이 생겼습니다.

내일도 힘내서 만들어야 할 것들이 많아지겠다는 생각이 드는군요