From 4abbfd72db72356e5bf116f44c852589887dfcaf Mon Sep 17 00:00:00 2001 From: Faheem Kulangara Kandiyil Date: Sat, 23 Nov 2024 12:42:39 -0500 Subject: [PATCH] final --- .../slack_channel_data/process_slack_data.py | 2 +- hb_cs_genie/package-lock.json | 14 +++++ hb_cs_genie/package.json | 1 + hb_cs_genie/src/App.css | 39 +++++++++++++- hb_cs_genie/src/App.js | 54 +++++++++++-------- llm/qa_generator.py | 4 +- 6 files changed, 87 insertions(+), 27 deletions(-) diff --git a/data_sources/slack_channel_data/process_slack_data.py b/data_sources/slack_channel_data/process_slack_data.py index ad25064..068dbf7 100644 --- a/data_sources/slack_channel_data/process_slack_data.py +++ b/data_sources/slack_channel_data/process_slack_data.py @@ -43,7 +43,7 @@ def clean_slack_data(raw_message): return raw_message # Return original if processing fails # Read the CSV file -df = pd.read_csv('data_sources/slack_channel_data/#advanced-support_large_replies.csv') +df = pd.read_csv('data_sources/slack_channel_data/#advanced-support_breakdown - compiled.csv') # Clean the specific column (replace 'conversation_column' with your column name) df['content'] = df['conversation'].apply(clean_slack_data) diff --git a/hb_cs_genie/package-lock.json b/hb_cs_genie/package-lock.json index 328bfed..75b461b 100644 --- a/hb_cs_genie/package-lock.json +++ b/hb_cs_genie/package-lock.json @@ -16,6 +16,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-loading-indicators": "^1.0.0", "react-markdown": "^9.0.1", "react-scripts": "^5.0.1", "web-vitals": "^2.1.4" @@ -14037,6 +14038,19 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-loading-indicators": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-loading-indicators/-/react-loading-indicators-1.0.0.tgz", + "integrity": "sha512-0xI07RxuT62NcdKB+6pphR++cnkk9iu8DO0H9kSKE9X71oY/M+gkqTaCjoYA1T3UYrRKdm52QvnwY/YTAU5/cg==", + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/react-markdown": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz", diff --git a/hb_cs_genie/package.json b/hb_cs_genie/package.json index 4f4e832..598d4d5 100644 --- a/hb_cs_genie/package.json +++ b/hb_cs_genie/package.json @@ -11,6 +11,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-loading-indicators": "^1.0.0", "react-markdown": "^9.0.1", "react-scripts": "^5.0.1", "web-vitals": "^2.1.4" diff --git a/hb_cs_genie/src/App.css b/hb_cs_genie/src/App.css index 6d1b5c2..6bac245 100644 --- a/hb_cs_genie/src/App.css +++ b/hb_cs_genie/src/App.css @@ -123,11 +123,11 @@ body { .search-button { transition: all 0.2s ease !important; - background: #8B5CF6 !important; /* Base color */ + background: #9c39c7 !important; /* Base color */ } .search-button:hover:not(:disabled) { - background: linear-gradient(135deg, #9f85ff 0%, #7e5cf6 100%) !important; + background: linear-gradient(135deg, #6506a9 0%, #4B0082 100%) !important; } .search-button:active { @@ -143,3 +143,38 @@ body { 50% { transform: scale(0.98); } 100% { transform: scale(1); } } + +.title-wrapper { + position: relative; + display: inline-block; + cursor: pointer; + padding: 10px 0; +} + +.title-text { + background: linear-gradient(150deg, #4B0082 10%, #b93eff 90%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + font-weight: bold; + transition: transform 0.3s ease; +} + +.line-reveal { + position: absolute; + left: 50%; + bottom: 0; + height: 1.5px; + width: 0; + background: linear-gradient(90deg, #4B0082, #b93eff); + transition: width 0.6s ease; + transform: translateX(-50%); +} + +.title-wrapper:hover .line-reveal { + width: 100%; +} + +.title-wrapper:hover .title-text { + transform: translateY(-2px); +} diff --git a/hb_cs_genie/src/App.js b/hb_cs_genie/src/App.js index 5e9dcd6..845ae28 100644 --- a/hb_cs_genie/src/App.js +++ b/hb_cs_genie/src/App.js @@ -11,9 +11,11 @@ import { Container, } from "@mantine/core"; import { IconSearch } from '@tabler/icons-react'; +import { ThreeDot } from 'react-loading-indicators' function App() { const [question, setQuestion] = useState('') + const [currentQuestion, setCurrentQuestion] = useState('') const [id, setId] = useState(null) const [status, setStatus] = useState('completed') const [answer, setAnswer] = useState('') @@ -37,7 +39,7 @@ function App() { setStatus('answered'); console.log(answer) setQaHistory(prevHistory => [{ - question: question, + question: currentQuestion, answer: data.answer }, ...prevHistory]); break; @@ -67,12 +69,14 @@ function App() { // Clean up any pending timeouts if component unmounts clearTimeout(); }; - }, [status, answer, id]); // Add id to dependencies + }, [status, answer, id, currentQuestion]); // Add id and currentQuestion to dependencies const handleSubmit = async (e) => { e.preventDefault(); if (!question.trim() || status === 'in-progress') return; + setCurrentQuestion(question); + setQuestion(''); setStatus('submitting'); setError(null); setAnswer(null); @@ -106,18 +110,22 @@ function App() { > {/* Title Section */} - - Homebase Genie + <Title + order={1} + className="title-wrapper" + style={{ + fontSize: '2.5rem', + marginBottom: '0px', + display: 'inline-block' + }} + > + <span className="title-text"> + Homebase Genie + </span> + <div className="line-reveal" /> - - Built by Queryous Minds. + + Built by Queryous Minds and LLMs. @@ -134,7 +142,7 @@ function App() {
setQuestion(e.target.value)} disabled={status === 'in-progress'} @@ -155,7 +163,7 @@ function App() { paddingLeft: '20px', paddingRight: '20px', overflow: 'hidden', - textOverflow: 'ellipsis', + textOverflow: 'ellipsis' }, wrapper: { width: '450px', @@ -168,7 +176,7 @@ function App() { disabled={!question.trim() || status === 'in-progress'} loading={status === 'in-progress'} style={{ - backgroundColor: '#8B5CF6', + backgroundColor: '#4B0082', height: '48px', padding: '0 30px', borderRadius: '14px', @@ -200,9 +208,9 @@ function App() { {/* Results Section */} {status === 'in-progress' && ( - - Thinking... - + + + )} {qaHistory.map((qa, index) => ( @@ -221,16 +229,18 @@ function App() { mb={10} style={{ fontWeight: 700, // Make question bold - color: '#1a1a1a' // Darker color for better contrast + color: '#1a1a1a', // Darker color for better contrast + fontSize: '14px' }} > {qa.question} str: "If the answer cannot be found in the context, say 'I don't have enough information to answer that question.' " "Total output characters should be less than 50000. " "If you find the answer, include the relevant article URLs at the bottom of your response using the format: " - "\n\n---\n\nFor more information, see: [Article Title or Slack thread url](URL)\n\n" + "\n\n---\n\nFor more information, see: [Title and if title not available URL](URL)\n\n" ) context = "" total_tokens = self.count_tokens(base_prompt + question) @@ -169,7 +169,7 @@ def generate_answer(self, question: str) -> str: model=self.model, max_tokens=1000, messages=[{"role": "user", "content": prompt}], - temperature=1 + temperature=0.3 ) return response.content[0].text