2024-05-27 AI 코딩 TIL

프로잭트 다듬기 힘들다..

기존의 AI의 추천 메뉴 선정 방식에서 변경을 주어 새로운 방법으로 메뉴를 선정하는 방법을 건의 하여 반영

기존 방식 :

유저의 요청에 맞추어 가장 어울리는 추천메뉴를 받고 해당되는 메뉴명을 recommend_menu로 받아서 get_menus에서도 반영하는 식으로 진행하고 hashtag를 이용하여 2개의 메뉴를 추가로 생성하여 보완

문제점 :

hashtag의 속성을 2가지 이상 받아 오는 경우 데이터 전달에서 오류가 발생하여 list가 생성이 되지 않는 문제가 발생

해결 방안 :

AI에게 추천 메뉴를 1개에서 최대 3개까지 받아올 수 있게 하고 get_menus를 할 때에는 추천 메뉴만을 이용하여 추천 메뉴를 만들어 주는 방법을 사용 이렇게 하면 hashtag를 사용하지 않고 추천메뉴를 표기 할 수 있음

연구사항 :

현재 AI로 고객의 추천음료를 얼만큼 자세하게 추천을 할 수 있을 지를 확인해 보고 원하는 결과 값이 잘 나오는지 테스트가 필요 (프롬프트에 구체적인 example제공)

system_data = f"""
        You are considered a staff member related to {category_text}.
        Our store offers the following menu items: {menu}.
        Additionally, we use the following hashtags in our store: {hashtags}.
        """

    system_output = f"""
        The format of the data I desire as a result is:
        "Message: [content]
        Recommended Menu: [menu_name]"
        For the "Recommended Menu" section, select three options that are most closely related to the customer's request and rank them accordingly. 
        For example, if there's only one recommended menu, it should be formatted as "Recommended Menu: menu_name". 
        If there are two recommended menus, it should be "Recommended Menu: menu_name, menu_name", 
        and if there are three recommended menus, it should be "Recommended Menu: menu_name, menu_name, menu_name", listing them in order of priority.
        """

    system_instructions = f"""
        When delivering a message to the customer, 
        kindly determine their desired menu item and keep the message concise, preferably to one sentence. 
        The recommended menu item must be chosen from the list of {menu}.
        """

• 기존에 비교적 정확성이 떨어지던 프롬프트를 개선

→ 음성인식과 메뉴추천의 통일성이 정확하지 않았음

• 강민준 튜터님 피드백 : 프롬프트를 하나가 아닌 단위별(데이터, 출력조건, 디테일 표현)로 나누어서 작성, 프롬프트를 영문으로 작성하여 속도개선
• 코드(프롬프트 작성)

• def bot(request, input_text, current_user):
      print(input_text)
      client = OpenAI(api_key=settings.OPEN_API_KEY)
  
      # 사용자의 카테고리 가져오기
      category = current_user.category
  
      # 사용자의 메뉴 및 해시태그 가져오기
      menu, hashtags = get_user_menu_and_hashtags(current_user)
  
      # 카테고리에 따라 시스템 지침 작성
      if category == "CH":
          category_text = "치킨"
      elif category == "CA":
          category_text = "카페"
      else:
          category_text = "음식점"
  
      system_data = f"""
          You are considered a staff member related to {category_text}.
          Our store offers the following menu items: {menu}.
          Additionally, we use the following hashtags in our store: {hashtags}.
          """
  
      system_output = f"""
          The format of the data I desire as a result is:
          "Hashtags: [hashtags]
          Message: [content]
          Recommended Menu: [menu name]"
          Please maintain this format without any alterations.
          If there's no relevant menu item, kindly return 'None'.
          """
  
      system_instructions = f"""
          When delivering a message to the customer, 
          kindly determine their desired menu item and keep the message concise, preferably to one sentence. 
          The recommended menu item must be chosen from the list of {menu}. 
          Utilize only the most relevant hashtag from the provided list of {hashtags}, 
          ensuring it is the most suitable option. 
          However, if there's nothing matching the list, kindly inform them 'None' and request a different inquiry.
          """
  
      completion = client.chat.completions.create(
          model="gpt-3.5-turbo",
          messages=[
              {"role": "system", "content": system_data},
              {"role": "system", "content": system_output},
              {"role": "system", "content": system_instructions},
              {"role": "user", "content": input_text},
          ],
      )
  
      ai_response = completion.choices[0].message.content
      print(ai_response)
      selected_choice = None
      customer_message = ""
      recommended_menu = ""
  
      try:
          for line in ai_response.split('\\n'):
              line = line.strip()  # Remove whitespace from both ends
              line = re.sub(r'[\\[\\]\\'\\"]', '', line)  # Remove square brackets
              if line.startswith('Hashtags:'):
                  selected_choice = line.split('Hashtags: ')[1].strip()
              elif line.startswith('Message:'):
                  customer_message = line.split('Message: ')[1].strip()
              elif line.startswith('Recommended Menu:'):
                  recommended_menu = line.split('Recommended Menu: ')[1].strip()
  
      except IndexError:
          selected_choice = ""
          customer_message = "죄송합니다. 다시 한 번 이야기 해주세요"
          recommended_menu = ""
  
      customer_message = customer_message.strip()
      return customer_message, selected_choice, recommended_menu
  

• 추천메뉴 AI 기능을 구현
• 기존의 일반적인 키오스크 화면을 대신하여, 비고령층분들에게도 추천메뉴를 크게 띄워주는 형식의 보다 보기 쉬운 템플릿 구현

• function updateMenus(hashtags = "", page = 1, recommended_menu = "") {
      $.ajax({
          url: '/orders/get_menus/',
          data: {hashtags: hashtags, page: page, recommended_menu: recommended_menu},
          dataType: 'json',
          success: function (data) {
              const menus = data.menus;
              const recommended = data.recommended;
              const menuContainer = $('#menuContainer');
              const recommendedContainer = $('#recommendedContainer'); // 새로운 컨테이너 추가
              menuContainer.empty();
              recommendedContainer.empty(); // 컨테이너 비우기
  
              // 추천 메뉴 추가
              if (recommended && recommended.length > 0) {
                  recommended.forEach(menu => {
                      const menuItem = `
                  <div class="menu-item card recommended" onclick="addItem('${menu.food_name}', ${menu.price}, '${menu.img_url}', this)">
                      <img src="${menu.img_url}" alt="${menu.food_name}" class="card-img-top">
                      <div class="card-body text-center">
                          <h5 class="card-title text-primary">${menu.food_name}</h5>
                          <p class="card-text text-muted">${menu.price}원</p>
                      </div>
                  </div>
              `;
                      recommendedContainer.append(menuItem); // 추천 메뉴를 별도의 컨테이너에 추가
                  });
  
              }
  
              // 일반 메뉴 추가
              menus.forEach(menu => {
                  const menuItem = `
              <div class="menu-item card" onclick="addItem('${menu.food_name}', ${menu.price}, '${menu.img_url}', this)">
                  <img src="${menu.img_url}" alt="${menu.food_name}" class="card-img-top">
                  <div class="card-body text-center">
                      <h5 class="card-title text-primary">${menu.food_name}</h5>
                      <p class="card-text text-muted">${menu.price}원</p>
                  </div>
              </div>
          `;
                  menuContainer.append(menuItem); // 일반 메뉴를 기존 컨테이너에 추가
              });
              updatePaginationButtons(data.page_count, page);
          },
  
          error: function (error) {
              console.error('메뉴 업데이트 중 오류 발생:', error);
          }
      });
  }