Merge pull request #1 from 2realzoo/jinjoo-1

nlp, client
plain127 · Jan 20, 2025 · 2ffdd23 · 2ffdd23
2 parents 597aaa9 + 64cb4b8
commit 2ffdd23
Show file tree

Hide file tree

Showing 18 changed files with 788 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -163,4 +163,32 @@ cython_debug/
 
 XTTS/
 test/
-DB/
+DB/
+
+old/tts_model/tts_model.pth
+
+# client gitignore
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+
+
diff --git a/client/public/index.html b/client/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/client/public/robots.txt b/client/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/client/src/App.js b/client/src/App.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import CategorySelector from './components/CategorySelector';
+import ChannelSelector from './components/ChannelSelector';
+import VideoPlayer from './components/VideoPlayer';
+import SentimentValue from './components/SentimentValue';
+import RealTimeChart from './components/RealTimeChart'
+import styled from 'styled-components';
+import { AppProvider } from './AppContext';
+import ChatContainer from './components/chat/ChatContainer';
+
+const AppContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  /* 배경색 & 폰트 */
+  background-color: ${(props) => props.theme.colors.background};
+  color: ${(props) => props.theme.colors.text};
+  font-family: ${(props) => props.theme.fonts.base};
+`;
+
+const HeaderSection = styled.header`
+  background-color: ${(props) => props.theme.colors.primary};
+  padding: 12px 20px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+`;
+
+const MainSection = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+`;
+const LeftSection = styled.div`
+  flex: 1;
+  display: flex;
+  padding: 0px 10px;
+  flex-direction: column;
+  box-sizing: border-box;
+`;
+
+function App() {
+  return (
+    <AppProvider>
+      <AppContainer>
+        <HeaderSection>
+          {/* 카테고리 선택 스크롤 버튼 */}
+          <CategorySelector />
+        </HeaderSection>
+
+        <MainSection>
+          <LeftSection>
+            {/* 채널 선택 스크롤 버튼 */}
+            <ChannelSelector/>
+
+            {/* 동영상 플레이어 */}
+            <VideoPlayer 
+              src="/home/ujoo/workspace/I-live-A-commerce/DB/1_1552806/1_1552806_data/output.m3u8"
+              autoPlay={true}
+              controls={true}
+              width="100%"
+              height="auto"
+            />
+
+            {/* 감정분석 수치 값 */}
+            <SentimentValue />
+
+            {/* 실시간 차트 */}
+            <RealTimeChart />
+          </LeftSection>
+          <ChatContainer/>
+        </MainSection>
+      </AppContainer>
+    </AppProvider>
+  );
+}
+
+export default App;
diff --git a/client/src/AppContext.js b/client/src/AppContext.js
@@ -0,0 +1,84 @@
+import React, { createContext, useContext, useState } from 'react';
+import axios from 'axios';
+
+const AppContext = createContext();
+
+export const AppProvider = ({ children }) => {
+  const [messages, setMessages] = useState([]); // 채팅 메시지 목록
+  const [currentMessage, setCurrentMessage] = useState(''); // 현재 입력된 메시지
+  const [useVoice, setUseVoice] = useState(false); // 음성 사용 여부
+  const [voiceName, setVoiceName] = useState('잇섭'); // 음성 이름
+  const [selectedCategory, setSelectedCategory] = useState('뷰티'); // 선택된 카테고리
+  const [selectedChannel, setSelectedChannel] = useState(null); // 선택된 채널
+  const [sentimentScore, setSentimentScore] = useState(undefined); // 감성 분석 점수
+  const [channelList, setChannelList] = useState([]); // 채널 목록
+
+  // 메시지 전송 핸들러
+  const handleSendMessage = async () => {
+    if (currentMessage.trim() === '') return; // 빈 메시지 방지
+
+    // 유저 메시지 추가
+    setMessages((prevMessages) => [
+      ...prevMessages,
+      { sender: 'user', text: currentMessage },
+    ]);
+
+    try {
+      // 서버로 POST 요청
+      const response = await axios.post('/chat', {
+        Category: selectedCategory,
+        Channel: selectedChannel,
+        Text: currentMessage,
+        Voice: useVoice,
+        Who: voiceName,
+      });
+
+      // 서버 응답 메시지 추가
+      if (response.data?.Text) {
+        setMessages((prevMessages) => [
+          ...prevMessages,
+          { text: response.data.Text, sender: 'bot' },
+        ]);
+      }
+
+      // 음성 데이터 처리
+      if (useVoice && response.data?.Audio) {
+        console.log('Received audio file URL:', response.data.Audio);
+      }
+    } catch (error) {
+      console.error('Error sending message to /chat:', error);
+    } finally {
+      // 메시지 입력창 초기화
+      setCurrentMessage('');
+    }
+  };
+
+  return (
+    <AppContext.Provider
+      value={{
+        messages,
+        setMessages,
+        currentMessage,
+        setCurrentMessage,
+        handleSendMessage,
+        useVoice,
+        setUseVoice,
+        voiceName,
+        setVoiceName,
+        selectedCategory,
+        setSelectedCategory,
+        selectedChannel,
+        setSelectedChannel,
+        sentimentScore,
+        setSentimentScore,
+        channelList,
+        setChannelList,
+      }}
+    >
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+// Context를 쉽게 사용할 수 있도록 제공
+export const useApp = () => useContext(AppContext);
diff --git a/client/src/components/CategorySelector.js b/client/src/components/CategorySelector.js
@@ -0,0 +1,75 @@
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import axios from 'axios';
+import { useApp } from '../AppContext';
+
+// 컨테이너 스타일
+const CategorySelectorContainer = styled.div`
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 8px;
+  margin: 10px;
+  /* 필요하면 스크롤 추가
+  overflow-x: auto;
+  */
+`;
+
+// 버튼 스타일
+const CategoryButton = styled.button`
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  background-color: #fff;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s, color 0.2s;
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+
+  /* 선택된(active) 상태 */
+  &.active {
+    background-color: #007bff;
+    color: #ffffff;
+    border-color: #007bff;
+  }
+`;
+
+function CategorySelector() {
+  const { selectedCategory, setSelectedCategory, channelList, setChannelList } = useApp()
+  const categories = ['뷰티', '푸드', '패션', '라이프', '여행/체험', '키즈', '테크', '취미레저', '문화생활'];
+
+  // 카테고리 선택 시 실행될 함수
+  const handleSelectCategory = async (category) => {
+    setSelectedCategory(category);
+    try {
+      const response = await axios.get('/channels', {
+        params: { category },
+      });
+      setChannelList(response.data);
+    } catch (error) {
+      console.error('Error fetching channel List:', error);
+    }
+  };
+
+
+  // useEffect(() => {
+
+  // }, [selectedCategory])
+
+  return (
+    <CategorySelectorContainer>
+      {categories.map((cat) => (
+        <CategoryButton
+          key={cat}
+          className={cat === selectedCategory ? 'active' : ''}
+          onClick={() => handleSelectCategory(cat)}
+        >
+          {cat}
+        </CategoryButton>
+      ))}
+    </CategorySelectorContainer>
+  );
+}
+
+export default CategorySelector;
diff --git a/client/src/components/ChannelSelector.js b/client/src/components/ChannelSelector.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useApp } from '../AppContext';
+
+// 컨테이너 스타일
+const SelectorContainer = styled.div`
+  display: flex;
+  align-items: center; /* 수직 정렬 */
+  gap: 10px; /* 레이블과 드롭다운 사이 간격 */
+  margin: 10px;
+  font-family: ${(props) => props.theme.fonts.base};
+`;
+
+// 레이블 스타일
+const Label = styled.label`
+  font-size: 16px;
+  color: ${(props) => props.theme.colors.text};
+  font-weight: bold;
+`;
+
+// 드롭다운 스타일
+const StyledSelect = styled.select`
+  padding: 8px 12px;
+  border: 1px solid ${(props) => props.theme.colors.border};
+  background-color: white;
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.text};
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s;
+
+  &:focus {
+    border-color: ${(props) => props.theme.colors.primary};
+    box-shadow: 0 0 4px ${(props) => props.theme.colors.primary};
+    outline: none;
+  }
+
+  &:hover {
+    border-color: ${(props) => props.theme.colors.primaryLight};
+  }
+`;
+
+function ChannelSelector() {
+  const { selectedChannel, setSelectedChannel, channelList } = useApp();
+
+  const handleChange = (e) => {
+    setSelectedChannel(e.target.value);
+  };
+
+  return (
+    <SelectorContainer>
+      <Label htmlFor="channel-select">채널 선택:</Label>
+      <StyledSelect
+        id="channel-select"
+        value={selectedChannel}
+        onChange={handleChange}
+      >
+        {channelList.map((ch, index) => (
+          <option key={index} value={ch}>
+            {ch}
+          </option>
+        ))}
+      </StyledSelect>
+    </SelectorContainer>
+  );
+}
+
+export default ChannelSelector;