카부캠 해커톤 : 갈등 해결, 커뮤니케이션 스킬 상승용 사이트-🐳고랭 | 본상!

카부캠 해커톤 본상!

(상장 나오면 업로드하기)ㅠㅠ수료식때나온대

---

🐳 기획

아이디어는 좀 늦게 정해졌다ㅜㅠ

우리는 우리 팀끼리 하기로 미리 정해 놨어서 ( 5명이라서 나중에 규민이 형 끼우긴 했지만)

전날에도 아이디어 회의했는데 (불법 아님/아이디어톤있었음)

안 정해져 있다가 첫날 4시쯤에 나온 아이디어로 가기로 했다!

그리고 그때부터 중심 아이디어 가지고 기획 회의를 했다

다 체계가 잇는 마크들이다

캐릭터구상

 

해커톤 많이 해 본 세호오빠가 있어서 포인트를 잘 잡을 수 있었다.

비즈니스 모델 같은 거를 중심으로 두고 생각했다.

기본 세팅 바로 노션/깃허브 넣어 주고

ㅋㅋㅋㅋㅋㅋㅋㅋ3레포 다 수직상승 후 끝인 거 웃기다

시작 전 다 같이 세부 기능 명세를 정했다

중간에 서로 다른 생각을 하고 있는 팀원이 없게 하기 위해서라고 세호 오빠가 말했는데

무슨 말인지 알겠어서 정말정말 좋은 것 같다 

협업 전약/공유 사항 이런 것도 정리 다 세호오빠가 잘 정해 줘서 굿굿이다 최고최고

AI 관련 노션은 태진오빠가 세팅해 줬다 굿굿

오 발표 준비 페이지가??? 중간에 할 일 없었던 지혁오빠한테 부탁했는데 그때 만든 건가?? 말투가 근데 아닌데

에이설마불참하겠어~! 말투를 보니 태진오빠군 언제 만들었대ㅋㅋㅋㅋㅋㅋㅋ

---

이번 해커톤에서 내 역할이다

---

🐳 디자인

그렇다..

해커톤은 개발도 중요하지만,,,

기획/아이디어와 "보여지는 것"이 중요하단 것......

결국 디자인을 나서서 했다

회의하면서 캐릭터(고래)/색깔(블루,보라) 다같이 정하고

이름은 밥먹으면서 생각했다(지피티와 같이)

그래~ 고래~ 느낌 고랭이 되었다

그 golang(고 언어) 아닙니다...

디자이너 취직

우선 피그마에서 프론트 세호오빠/주리언니랑 제일 먼저 했다

아무래도 프론트가 작업을 빨리 시작해야 하니까 AI는 태진오빠가 먼저 하고

 

1차 UX뽑기를 둘이 빠르게 하고

2차 ui 디자인을 내가 다시 만드는 식으로 했다

제주돌담체를 기본 폰트로 잡았다

컨셉은 부드럽고 친숙하게

 

색연필/수채화/ 높은 데포르메 귀여운 캐릭터 / 펄 / 하늘색 + 서브 보라색

와 이거 진짜..

밥 먹기 전에 닭갈비 마카롱 이야기 한 거 때문에...

갈등 상황 생각 안 나서 막 쓴 건데 최종 발표까지 그대로 올라가버렸다

 

ㅋㅋㅋㅋㅋㅋ이화톤 나갔을 때도 피그마디자인에 교수님 이야기 썼다가 발표 자료에 들어가버려서 급하게 수정했었는데

해커톤 디자인은 완성본이라고 생각하고 하기...

신촌에서도 항상 맥시멀리스트 소리 들었는데 여기서도 배경 빼는 게 어떻냐는 이야기를 들었다ㅠㅠㅠ

좀 미니멀하게 살아 본다

---

🐳 AI

기술 스택

내가 맡은 부분

정체성을 찾고자 프론트 말고 AI합류했는데

그냥 프론트 도왔어야 하나?? 몰겟내

UI 끝내고 늦게 합류해 

태진오빠가 순화하기/정리하기 만들어 놓은 거 기반으로 시작

열심히햇따

gpt-4o-mini 모델을 썼고 창의력 정도랑 최대 토큰을 1024로 늘리는 정도만 설정했다

 

이건 순화하기 템플릿 부분

많지는 않지만 테스트 몇 번 돌리면서 프롬프트 업데이트했다

from langchain_core.prompts import ChatPromptTemplate, SystemMessagePromptTemplate,  HumanMessagePromptTemplate

purify_system_message = '''### 지시 ### 
주어지는 문장을 순화하라. 욕설이 있으면 제외하라. 격한 표현이 있으면 돌려 표현하라. 조롱조가 있으면 표현을 긍정적으로 바꿔 표현하라. 단, 담고 있는 의미는 누락되어서는 안 된다. 
순화할 표현이 아무것도 없다면 그대로 출력해도 된다.
### 실행 순서 ###
1. 비속어를 순화한 문장을 3가지 만들어라.
이때 먼저 상대방의 감정에 공감, 나의 감정 전달, 나의 의도를 전달하면서 순화하면 좋다. 
2. 1차로 순화한 문장을 한 번 더 순화하라. 

### 출력 형식 ###
json 형식으로 출력하되 아래 형식으로 출력하라.
{{
    "messages": [
        // 2차적으로 순화한 메시지 3개, 모두 겹치면 안 된다.
    ]
}}'''

def make_purify_prompt(relation,  explain_situation,user_input, history, related_documents) :
    if related_documents != "none":
        related_documents = "\n".join([doc.page_content for doc in related_documents])

    putify_prompt = ChatPromptTemplate.from_messages(
        [
            SystemMessagePromptTemplate.from_template("다음은 '{RELATION}' 간의 대화이며 '{EXPLAIN_SITUATION}'인 상황에 처해 있다. 그들은 직전에 '{HISTORY}'라는 대화를 나누었다. 이와 관련된 자료 내용으로는 '{RELATED_DOCUMENTS}'가 있다. 자료 내용을 참고하여 다음 주어지는 문장을 보완하여라." + purify_system_message),
            HumanMessagePromptTemplate.from_template("{USER_INPUT}"),
        ]
    ).format(RELATION=relation, EXPLAIN_SITUATION= explain_situation, USER_INPUT=user_input, HISTORY=history,RELATED_DOCUMENTS =related_documents)
    return putify_prompt

랭체인 라이브러리 ChatPromptTemplate, SystemMessagePromptTemplate, HumanMessagePromptTemplate를 이용했다

테스트

사용자에게 받은 '관계/상황설명/관련문서'와 이전 '대화 내용'을 같이 프롬프트에 넣는다.

이렇게 비슷하게 프롬프팅 4개~~

 

'관계/상황설명'은 어떻게 가지고 있냐묜

그냥 이 내용 넘겼다

이전 '대화 내용'은 어떻게 가지고 있냐묜

from langchain.memory import ConversationSummaryBufferMemory

from aiModel import llm

memory_store = {}

def get_user_memory(user_id):

    if user_id not in memory_store:
        memory_store[user_id] = ConversationSummaryBufferMemory(llm=llm.AI_model)
        return "nothing"
    return memory_store[user_id]

def add_message(user_id,input,output):
    memory_store[user_id].save_context({"inputs": input}, {"outputs": output})

랭체인 메모리의 ConversationSummaryBufferMemory를 사용했다.

이걸 계속 사용하묜 이전에 했던 대화 내용이 저장되고, 지정한 최대 토큰에 도달하면 알아서 중요 부분만 요약되어서 저장되기 때문에 효율이 좋다~~~

 

aws ec2에 올려서 계에속 돌릴 거니까

사용자마다 고유 ID를 부여해서 그 내부 메모리에 계속 history를 저장해 놓고

메세지를 보낼 때마다 고유 ID로 history 확인해서 같이 모델한테 전달하는 식의 운영

채팅 끝나면 필요가 없으니까~ 

딕셔너리 -> 서버 내리기 전까지 휘발성 메모리에 저장

 

이전 '관련 문서'는 어떻게 가지고 있냐묜

RAG로 사용자가 업로드한 자료 같이 넘기기

import os

from langchain.document_loaders import UnstructuredFileLoader
from langchain.embeddings import CacheBackedEmbeddings
from langchain.storage import LocalFileStore
from langchain.text_splitter import CharacterTextSplitter
from langchain.vectorstores import Chroma

from aiModel import embedding_model


def make_rag_file(file_path, chating_room_id):
    # 저장소
    cache_dir_path = f".cache/{chating_room_id}"
    os.makedirs(cache_dir_path, exist_ok=True)
    cache_dir = LocalFileStore(cache_dir_path)

    # 문서 로드하고 쪼개기
    # file_path = f"/home/ubuntu/files/{file_path}"
    loader = UnstructuredFileLoader(file_path)
    splitter = CharacterTextSplitter.from_tiktoken_encoder(
        separator="\n",
        chunk_size=600,
        chunk_overlap=100,
    )
    docs = loader.load_and_split(text_splitter = splitter)

    # 임베딩 
    embeddings = embedding_model
    cached_embeddings = CacheBackedEmbeddings.from_bytes_store(embeddings, cache_dir)

    # Chroma  
    vectorstore = Chroma.from_documents(docs, cached_embeddings)
    retriever = vectorstore.as_retriever()

    return retriever

UnstructuredFileLoader 문서 로더 이용

CharacterTextSplitter로 문서 분할

OpenAIEmbeddings로 임베딩

CacheBackedEmbeddings로 임베딩의 재사용성

Chroma DB를 이용하여 임베딩된 문서들을 기반으로 벡터 저장소를 구성

def purify(user_id, chating_room_id, relation, explain_situation, message, file_path=None):
    history = context.get_user_memory(user_id)
    
    if file_path:
        # file_path = f"/home/ubuntu/files/{file_path}"
        retriever = rag_service.make_rag_file(file_path,chating_room_id)
        # 메시지와 관련된 문서 검색
        related_documents = retriever.get_relevant_documents(message)
    else:
        related_documents = "none"

이런 식으로 rag 할 게 있는지 없는지 확인하고 진행한다

파이썬은 오버로딩 못 하나? 했는데 매개변수 기본값 설정으로 할 수 있다는 거 태진형이 알려줬다

 

이건 "정리하기" 기능을 rag와 함께 수행했을 때의 테스트인데

이렇게 자료를 전달하면

이렇게 정리된다~!~!~!~!

그리고 적당히 다 비슷하게 작업했따

- ai와의 채팅

- 결과 화면 : 채팅내용 요약하기

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

이번에 태진오빠가 fast api로 서버 배포했는데

나도 밥먹을 때 폰으로 좀 공부하다가 그냥 백엔드 이미 해본 태진오빠한테 다 맡기는 게 나을 것 같아서 그쪽은 안 건드렸다

DB랑 다 알아서 해줘서 짱 편햇다 최고 

그먕내가멍청함

혼자서 하는 것보다 이렇게 팀으로 하니까 뭔가 나오는 형식이랑 필요한 것들 요청 같은 것도 중요하다는 걸 알게 되는 듯

백엔드랑 프론트랑 다 어케 돌아가는지는 알아 놓아야 협업할 때 내가 뭘 요청해야 하는지도 알 수 있을 것 같다

라는 생각을 함

---

🐳 PPT/발표

30분슬립

다른사람들도 아예 새거나 1시간 미만으로 잔 듯

진짜 내가 원래 그럴 수 있는 인간이 아닌데 가족 다 자서 혼자서 거미를 잡았다 진짜손바닥반만햇다

새벽에 나머지 사람들이 연결 버그로 고생할 때

캬..채팅쉽지않다...이것만아니었으면할수있었을지두,,

PPT는 규민오빠랑 나랑 주리언니랑 빚었다 +세팅 지혁로빠

 

아 제정신 아닌 채로 만들었더니 지금 보니까 좀 흐름이 맘에 안 들긴 하다..

어떤 플로우로 진행되는지 모르는 사람들한테 잘 전달이 안 될 것 같음

내가 1차로 완성한 거 주리언니가 아래 내용으로 정리해 줬다

넘이뻥

주리언니랑 연기했다 여기

큭큭

여기는 박수 유도함

팀원들한테 유도하라고 부탁햇다

이뽀!

gpt 대본 쓰기 왜 이렇게 못하냐

대본은 급하게 예선 이후에 썻다

이쯤 찍었던 것 같은데

안녕하세요. 저희는 이번 카카오 부트 캠프 해커톤에 참가한 2조 고랭입니다. 저는 발표를 맡은 팀장 정은채입니다

저희 조는 정은채, 박세호, 한주리, 박지혁, 안태진, 장규민으로 이루어져 있습니다.

오늘날 많은 사람들이 대화에서의 갈등을 경험하고 있습니다. 여러분들도 이러한 경험이 있을 것으로 예상합니다. 

읽기~핑퐁~

의사소통 실패로 인한 개인간 갈등은 사회 전반적으로 증가하는 추세이며, 그로 인한 관계 파괴와 정신적 스트레스는 우리에게 부정적인 영향을 끼칩니다.

그렇다면 우리가 부드럽게 말할 수 있는 능력을 탑재하게 된다면 어떨까요?

읽기~핑퐁~

부드러운 의사소통의 능력만 갖추게 된다면 우리는 더 나은 관계로 나아갈 수 있습니다.

갈등을 줄이고 긍정적인 대화를 유도하여 건강한 소통 문화를 만드는 플랫폼,
단순히 비속어를 수정하는데 그치지 않고 피드백을 제공함으로써 대화 습관 개선/ 자기 성찰을 할 수 있는 플랫폼

갈등 완화/커뮤니케이션 상승 채팅 웹 “고랭”입니다.
(박수 유도)

저희의 비즈니스 모델에 대해 설명하겠습니다.
배려심이 담긴 커뮤니케이션 구사에 어려움을 겪는 유아, 청소년들에게 바른 대화 스킬을 심어줄 수 있기 때문에 학교 및 공공기관, 보호자에게 수요가 있을 것으로 예상합니다.
잦은 싸움과 소통의 부재를 겪는 부부나 연인들에게도 관계 개선의 연결점으로 작용하여 매력 포인트를 가져갈 수 있을 것으로 보입니다. 이후 클리닉,상담소로 연계함으로서 병원 대상으로도 이점을 챙길 수 있습니다.
그 밖에 사회적 소통에 어려움이 있는 사람들 모두에게 커뮤니케이션 피드백 역할을 함으로써 비즈니스 모델로서의 가치가 충분하다고 생각합니다.


주요 기능에 대해 설명드리겠습니다.

저희는 순화하기와 정리하기 두 가지 기능을 채팅방에 적용하고 있는데요, 
순화하기는 욕설 비속어 등의 공격적인 말, 조롱조, 불건전한 말 등에 대한 필터링을 적용할 수 있습니다.
정리하기는 두서 없는 말을 일목요연하게 기존 상황을 적용하여 정리해 줄 수 있습니다.
또 고랭과의 대화, 즉 ai와의 채팅을 통해 커뮤니케이션 스킬을 키울 수 있습니다.
마찬가지로  순화하기와 정리하기 두 가지 기능을 사용할 수 있습니다.
그리고 채팅이 끝나면 커뮤니케이션에 대한 결과를 확인하여 나의 커뮤니케이션에 대한 피드백을 받을 수 있습니다.

다음은 해커톤 주제였던 LLM 활용을 어떻게 적용하였는지에 대해 설명하겠습니다.
설명~~~

래그설명!~
다른 예시를 들자면, 이혼,양육 등 법적 공방을 하고 있는 부부가 관련 법률 내용에 대한 문서를 업로드함으로써 더욱 체계적이고 효율적인  소통을 할 수 있게 될 것입니다.

화면을 자세히 보여드리겠습니다.

귀여운 캐릭터를 통해 따뜻하고 부드러운 온보딩 페이지를 구성했습니다.

홈 화면에는 비즈니스 모델로써 삼았던 병원/상담소/클리닉 등의 연계를 위한 광고가 자리합니다. 그 아래에는 두 개의 핵심 기능, 갈등 해결
 2인용 채팅,  AI와의 1인 채팅이 자리합니다.
마이페이지에서는 내 커뮤니케이션 능력의 상승도와 이전 결과지들을 확인하여 피드백을 통해 좀 더 나은 소통능력을 얻을 수 있습니다.

채팅에 접속하게 되면 상황에 도움이 될 만한 자료를 업데이트할 수 있습니다. 그리고 관계와 상황 설명을 세팅합니다. 이후 2인 챗이라면 공유링크를 통해 아래 카톡처럼 전송이 가능합니다.

채팅 화면입니다.
순화하기 버튼을 통해 내 말을 순화한 답변의 후보들을 3개 받아볼 수 있으며 선택한 후 편집하여 보낼 수 있습니다. 
또는 정리하기 버튼을 통해 두서 없는 말을 일목요연하게 정리해 줄 수 있습니다.
오른쪽은 ai챗의 시작 화면입니다

LLM은 이전에 진행했던 대화, 기존에 입력했던 관계, 자료, 상황 설명을 전부 참고하여 답변들을 반환합니다.

아 이거 뒤에 날아가서 프리스타일함 ㅠ

---

🐳 결과

10시반제출이라서 8시까지 다시 카부캠장 회귀 

좀비

예선 27팀이 각 회의실에서 예선 발표를 하고 

4팀만 본선 올라가는 구조였다

 

다들 지치고,,해결되지 않는 버그도 있어서 뭔가 마음을 놓은 상태 같았다..

나도 발표문 써서 가려고 했는데 그냥 안 썼다ㅋㅋ

 

회의실에서 프리스타일로 입을 털었는데 

뭔가

쪽수가 우리가 더 많아서 그런지 이기는 느낌이라서

좋은 벌스를 구사해냈다

그리고 심사위원님이 관심 가지는 태도를 보이시길래..

질문도 많이 하시고.. 팀원들도 대답 잘했다ㅋㅋㅋ

 

나와서 보니까 느낌이 너무 합격이라서 

결과 나오기 전 한두시간 동안 백 프론트 연결을 다시 시작했다

우리만 점심시간에 밥 안 먹고 남았던 듯

우와우~~다들 멋져

나는 옆에서 사진이나 열심히 찍고 대본 적었다

진짜 직전까지했다....멋지네...

가람언니가찍어줫따

그리고 발표를 했는데~~ 

으악! 시연에서 에러가 나는 바람에

세호오빠가 싸우는 동안 

앞에서 쇼했다

 

무슨 말 했는지도 모르겠넹 ㅎㅎ 

기획 부분에 신경쓰느라 개발이 촉박햇어요~ 팀원들이랑 오늘 완성하고 가기로 했습니다~그렇죠 여러분?!

  마이크도 돌려서 대답 들었던 것 같은데 

노래방에서 하던 짓을...젠장

내가 웃는게 웃는 게 아냐

으악! 앞에서 카메라로 찍던데 어디 업로드되는걸까?????!?

beebee......

 

쩝

1등 우수상 / 나머지 세 팀 본상

인데 

그래서 본상이 됐따~ 

끗.

---

헤헤 가람언니 최고 운동동아리열심히 해야징

ㅎㅎ..이번에 그림 칭찬을 많이 들었다...

마음 놓고 좋아해도 되는 건지...

공부 열심히 해야지

 

끝나고 123차 갔다

보리차를 술처럼 먹었다 진통제랑 술이랑 같이 먹으면 안 돼서 어쩔 수 없슴

밤샛지만 갈 건 가야지

ㅋㅋㅋㅋㅋㅋ취한 사람들 구경 재밌었다

왜 일정이 카부캠해커톤 k디지털해커톤 1차카부캠과제마감 뀨엘플젝 다 겹치게 된 거야