Skip to content

Commit

Permalink
Merge pull request #19 from jay-m-dev/NickGPTBranch
Browse files Browse the repository at this point in the history 
Nick gpt branch
  • Loading branch information
@HyunjunA
HyunjunA authored May 13, 2023
2 parents 683cb08 + f57b73f commit d27c5b2
Show file tree
Hide file tree
Showing 4 changed files with 170 additions and 22 deletions.
12 changes: 6 additions & 6 deletions chatExamples.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
The following table shows some examples of chat. Please submit the chats and check the response from the large language model.

| | Chat examples |
| --- | --------------------------------------------------------------------------------------------------------- |
| 1 | "Drop first column and save it as new_df.csv." |
| 2 | "Plot sepal-width, petal-length in the x and y axis with color, and save it as a jpg." |
| 3 | "Please read nonexist.csv file." |
| 4 | Plot sepal-width, petal-length, and petal-width in the x, y, and z axis with color, and save it as a jpg. |
| | Chat examples |
| --- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 1 | "Remove the first column from the dataset and save the resulting dataframe as 'new_df.csv" |
| 2 | "Create a scatter plot with sepal width on the x-axis and petal length on the y-axis, using color to differentiate between data points. Save the plot as a JPEG file." |
| 3 | "Attempt to read the file 'nonexist.csv' and handle any resulting errors appropriately." |
| 4 | "Create a 3D scatter plot with sepal width, petal length, and petal width on the x, y, and z axes, respectively. Use color to differentiate between data points and save the plot as a JPEG file." |
22 changes: 21 additions & 1 deletion lab/webapp/dist/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -843,6 +843,23 @@ text{
width: 48%;
} */


.ChatGPT {
display: flex;
flex-direction: column;
height: 100%;
}

.chatbox {
flex-grow: 1;
}

.chat-input-holder {
margin-top: auto;
}



.chat-input-textarea {
background-color: #40414f;
width: 90%;
Expand Down Expand Up @@ -880,7 +897,9 @@ text{
right: 0;
bottom: 89px;
left: 0;
/* overflow-y: scroll; */

/* overflow-y: scroll;
scroll-behavior: smooth; */
text-align: left;
}

Expand Down Expand Up @@ -1575,6 +1594,7 @@ visibility:hidden;
/* display:"hidden"; */
/* backgroundColor: '#343541'; */
overflow-y: scroll;
scroll-behavior: smooth;
}


Expand Down
111 changes: 105 additions & 6 deletions lab/webapp/src/components/ChatGPT/ChatBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import { AllContext } from './context/AllContext';
const ChatBox = () =>

{
const {chatLog, setChatInput, handleSubmit, chatInput, modeForChatOrCodeRunning, setModeForChatOrCodeRunning,datasetId,experimentId, updateAfterRuningCode, modeForTabluerData, setModeForTabluerData, booleanPackageInstall, setBooleanPackageInstall,submitErrorWithCode,showCodeRunningMessageWhenClickRunBtn,getChatMessageByExperimentId,chatCurrentTempId,getSpecificChatbyChatId,patchChatToDB,checkCodePackages,disableReadingInput,enableReadingInput} = useContext(AllContext);
const {chatLog, setChatInput, handleSubmit, chatInput, modeForChatOrCodeRunning, setModeForChatOrCodeRunning,datasetId,experimentId, updateAfterRuningCode, modeForTabluerData, setModeForTabluerData, booleanPackageInstall, setBooleanPackageInstall,submitErrorWithCode,showCodeRunningMessageWhenClickRunBtn,getChatMessageByExperimentId,chatCurrentTempId,getSpecificChatbyChatId,patchChatToDB,checkCodePackages,disableReadingInput,enableReadingInput,autoScrollDown} = useContext(AllContext);

useEffect(() => {
// const highlightScript = document.createElement('script');
Expand Down Expand Up @@ -90,7 +90,12 @@ const ChatBox = () =>



}, []);
}, []);

const [hasZip, setHasZip] = useState(false);
const [zipUrl, setZipUrl] = useState(null);
const [zipFileName, setZipFileName] = useState(null);
const [hasZipIndexMessage, setHasZipIndexMessage] = useState(null);


return (
Expand Down Expand Up @@ -122,6 +127,19 @@ const ChatBox = () =>
checkCodePackages = {checkCodePackages}
disableReadingInput = {disableReadingInput}
enableReadingInput = {enableReadingInput}
autoScrollDown = {autoScrollDown}

hasZip = {hasZip}
setHasZip = {setHasZip}

zipUrl = {zipUrl}
setZipUrl = {setZipUrl}

hasZipIndexMessage = {hasZipIndexMessage}
setHasZipIndexMessage = {setHasZipIndexMessage}

zipFileName = {zipFileName}
setZipFileName = {setZipFileName}

/>)
)
Expand Down Expand Up @@ -191,11 +209,11 @@ const ChatBox = () =>

</div>
</section>
)
)
}

// Individual Chat Message
const ChatMessage = ({key,message,datasetId,experimentId,updateAfterRuningCode,modeForTabluerData, setModeForTabluerData,booleanPackageInstall, setBooleanPackageInstall, submitErrorWithCode,showCodeRunningMessageWhenClickRunBtn,getChatMessageByExperimentId, chatCurrentTempId,getSpecificChatbyChatId,patchChatToDB,checkCodePackages,disableReadingInput,enableReadingInput}) => {
const ChatMessage = ({key,message,datasetId,experimentId,updateAfterRuningCode,modeForTabluerData, setModeForTabluerData,booleanPackageInstall, setBooleanPackageInstall, submitErrorWithCode,showCodeRunningMessageWhenClickRunBtn,getChatMessageByExperimentId, chatCurrentTempId,getSpecificChatbyChatId,patchChatToDB,checkCodePackages,disableReadingInput,enableReadingInput,autoScrollDown, hasZip, setHasZip, zipUrl, setZipUrl, hasZipIndexMessage, setHasZipIndexMessage, zipFileName, setZipFileName}) => {


let codeIncluded = checkIncludeCode(message.message)
Expand All @@ -204,7 +222,7 @@ const ChatMessage = ({key,message,datasetId,experimentId,updateAfterRuningCode,m

const [isExpanded, setIsExpanded] = useState(false);

// temp

// const [tabluerData, setTabluerData] = useState([]);

const handleDoubleClick = () => {
Expand Down Expand Up @@ -457,7 +475,16 @@ const ChatMessage = ({key,message,datasetId,experimentId,updateAfterRuningCode,m




// if message.message includes .zip
if (message.message.includes(".zip"))
{
// let hasZip=false;
// let zipUrl="";

let lengthMessage = message.message.split(/\n/).length-1;
console.log("lengthMessage",lengthMessage)
console.log("message.message",message.message)
}


return (
Expand Down Expand Up @@ -491,10 +518,18 @@ const ChatMessage = ({key,message,datasetId,experimentId,updateAfterRuningCode,m
{/* v7 */}
{
message.message.split(/\n/).map((line,index) => {

console.log("choi-test", line)


// non code message which includes image
if (line.includes(".png") && line.includes("http") || line.includes(".jpg") && line.includes("http")) {




// create a new instance of JSZip
// const zip = new zip();
// console.log("1-if", line)
return (

Expand All @@ -506,6 +541,8 @@ const ChatMessage = ({key,message,datasetId,experimentId,updateAfterRuningCode,m
</svg>
</div>
</a>



);
}
Expand Down Expand Up @@ -605,6 +642,32 @@ const ChatMessage = ({key,message,datasetId,experimentId,updateAfterRuningCode,m
);
}


else if (line.includes(".zip") && line.includes("http") )
{
// set hasZip to true
setHasZip(true);
// set zipUrl to the url of the zip file
setZipUrl(line.substring(line.indexOf("http")));

// zipUrl.substring(0, zipUrl.indexOf(","))
setZipFileName(line.substring(0, line.indexOf(",")));

setHasZipIndexMessage(index);

// return (
// // <div>

// <a href={line.substring(line.indexOf("http"))} download>
// <b style={{color: '#87CEEB'}}>Download {line.substring(0, line.indexOf(","))}</b>
// </a>

// // </div>
// );
}



// if the message includes "The tabular data is:" , set modeForTabluerData to true
// this let us know that the next line is tabluer data
else if (line.includes("The tabular data is:") && modeForTabluerData === false)
Expand Down Expand Up @@ -801,6 +864,9 @@ const ChatMessage = ({key,message,datasetId,experimentId,updateAfterRuningCode,m
// extrac code from text
// code is between ```python and ```

await showCodeRunningMessageWhenClickRunBtn(e);


let tempCode = extractCodeFromMess(tempText);

// console.log("code-findTheLastCodeMessageFromHTML", tempCode)
Expand All @@ -811,6 +877,8 @@ const ChatMessage = ({key,message,datasetId,experimentId,updateAfterRuningCode,m

enableReadingInput();

autoScrollDown();

// // console.log("chatLog-Errno",chatLog)


Expand Down Expand Up @@ -876,6 +944,31 @@ const ChatMessage = ({key,message,datasetId,experimentId,updateAfterRuningCode,m
}
}

// gif, image, video
// else if(line.includes(".gif") ){


// }

// length of message.message.split(/\n/)
if(index === message.message.split(/\n/).length-1 && hasZip){


return (
// <div>

<a href={zipUrl} download>
<b style={{color: '#87CEEB'}}>Download {zipFileName}</b>
</a>

// </div>
);
}





})
}
</div> :
Expand Down Expand Up @@ -1256,6 +1349,9 @@ const ChatMessage = ({key,message,datasetId,experimentId,updateAfterRuningCode,m
updateAfterRuningCode(currentEvent, resp_runExtractedCode)

enableReadingInput();

// showCodeRunningMessageWhenClickRunBtn have autoScrollDown function
// autoScrollDown();

}
}
Expand Down Expand Up @@ -1422,6 +1518,9 @@ const ChatMessage = ({key,message,datasetId,experimentId,updateAfterRuningCode,m
await updateAfterRuningCode( currentEvent, resp)

enableReadingInput();

// showCodeRunningMessageWhenClickRunBtn have autoScrollDown function
// autoScrollDown();



Expand Down
Loading

0 comments on commit d27c5b2

Please sign in to comment.