Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

has debug the endpoint #2

Merged
merged 1 commit into from
Oct 14, 2023
Merged

has debug the endpoint #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 134 additions & 105 deletions packages/nextjs/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,116 +2,145 @@ import { NextPage } from "next";
import { useEffect, useState } from "react";

const ETHSpace: NextPage = () => {
//在对后端发起请求后，将response的内容保存在results中
const [result, setResult] = useState("The search results will be shown here");
//设置默认是在我们提供的数据集而不是公共数据集中查询
const [qinPublic, setQinPublic] = useState(false);
//获取目前提供的数据集选项
const [options, setOptions] = useState<string[]>([]);
//获取用户选择的数据集
const [dataset, setDataset] = useState("");
//获取用户搜索的prompt
const [seaPrompt, setSeaPrompt] = useState("");
//仅在组件挂载时执行一次获取数据集列表
useEffect(() => {
const data = fetchOptions();
setOptions(data);
});
//在对后端发起请求后，将response的内容保存在results中
const [result, setResult] = useState<{data:string,metadata:{}}[]>([{data:"The search results will be shown here",metadata:{}},]);
//设置默认是在我们提供的数据集而不是公共数据集中查询
const [qinPublic, setQinPublic] = useState(false);
//获取目前提供的数据集选项
const [options, setOptions] = useState<string[]>([]);
//获取用户选择的数据集
const [dataset, setDataset] = useState("");
//获取用户搜索的prompt
const [seaPrompt, setSeaPrompt] = useState("");
//仅在组件挂载时执行一次获取数据集列表
useEffect(() => {
fetchOptions();
// console.log(data);
});

//从后端获取数据集列表
const fetchOptions = () => {
return ['eth-smart-contracts', 'eth-smart-contracts-sliced', "eth-smart-contracts-analysis"];
};
//获取search prompt与dataset名字后向后端发request
const handleonClick =()=>{

};
return (
<div className="grid lg:grid-cols-2 flex-grow">
<div className="hero min-h-screen bg-base-200 bg-gradient-to-r from-green-500 to-blue-500">
<div className="hero-content text-center">
<div className="max-w-md">
<h1 className="text-2xl font-bold">AI-based Smart Contract Explorer</h1>
<p className="py-6">-- Smart Contract Search Platform based on AI<br></br>
-- Let AI fully assist smart contract developers</p>
<div className="form-control mb-6">
<label className="label cursor-pointer">
<span className="label-text text-2xl">Search in the Free Dataset:</span>
<input
type="checkbox"
className="toggle toggle-accent"
checked={qinPublic}
onChange={() => {
setQinPublic(!qinPublic);
}}
/>
</label>
</div>
<div className="join mb-6">
<div>
<div>
<input
style={{width: "300px"}}
className="input input-bordered join-item"
value={seaPrompt}
onChange={(e) => {
setSeaPrompt(e.target.value);
}}
placeholder="Enter your prompt to search" />
</div>
</div>
<div>
<div>
{!qinPublic ? (
<select
className="select select-bordered join-item"
onChange={(e) => {
setDataset(e.target.value);
}}>
{
options.map((option, index) => (
<option key={index} value={option}>{option}</option>
))
}
</select>
) : (
<input
className="input input-bordered join-item"
value={dataset}
onChange={(e) => {
setDataset(e.target.value);
}}
placeholder="Pls input the public dataset name" />
)}
</div>
</div>
<div className="indicator">
<button className="btn join-item" onClick={()=>{
handleonClick();
}}>Search</button>
</div>
</div>
<div className="hero-content text-left">
<span className="text-sm">
<p><b>A search question example: </b></p>
<p>* Give me some function examples about NFT</p>
<p>* 0x73c7448760517E3E6e416b2c130E3c6dB2026A1d</p>
</span>
</div>
</div>
</div>
//从后端获取数据集列表
const fetchOptions = async () => {
const response = await fetch("https://faasbyleeduckgo.gigalixirapp.com/api/v1/run?name=VectorAPI&func_name=get_cluster", {
method: "POST",
headers:{
'Content-Type':'application/json;charset=utf-8',
},
body:JSON.stringify({
"params": ["ai-based-smart-contract-explorer"]
})
});
const data=await response.json();
setOptions(data.result);
};
//获取search prompt与dataset名字后向后端发request
const handleonClick = async() => {
const response = await fetch("https://faasbyleeduckgo.gigalixirapp.com/api/v1/run?name=VectorAPI&func_name=search_data",{
method:"POST",
headers:{
'Content-Type':'application/json; charset=utf-8',
},
body:JSON.stringify({
"params": [dataset, seaPrompt, 5]
})
});
const data=await response.json();
// console.log(data.result.similarities);
setResult(data.result.similarities);
};
return (
<div className="grid lg:grid-cols-2 flex-grow">
<div className="hero min-h-screen bg-base-200 bg-gradient-to-r from-green-500 to-blue-500">
<div className="hero-content text-center">
<div className="max-w-md">
<h1 className="text-2xl font-bold">AI-based Smart Contract Explorer</h1>
<p className="py-6">-- Smart Contract Search Platform based on AI<br></br>
-- Let AI fully assist smart contract developers</p>
<div className="form-control mb-6">
<label className="label cursor-pointer">
<span className="label-text text-2xl">Search in the Free Dataset:</span>
<input
type="checkbox"
className="toggle toggle-accent"
checked={qinPublic}
onChange={() => {
setQinPublic(!qinPublic);
}}
/>
</label>
</div>
<div className="bg-gradient-to-r from-blue-500 to-green-500">
<div className="mx-auto w-4/5 h-4/5 backdrop-blur-lg backdrop-filter p-10 m-10 rounded-lg opacity-80 shadow-md">
<h2 className="text-4xl font-bold mb-4">Search Results</h2>
<span className="text-2xl m-2">
{result}
</span>
<div className="join mb-6">
<div>
<div>
<input
style={{ width: "300px" }}
className="input input-bordered join-item"
value={seaPrompt}
onChange={(e) => {
setSeaPrompt(e.target.value);
}}
placeholder="Enter your prompt to search" />
</div>

</div>
<div>
<div>
{!qinPublic ? (
<select
className="select select-bordered join-item"
onChange={(e) => {
setDataset(e.target.value);
}}>
{
options.map((option, index) => (
<option key={index} value={option}>{option}</option>
))
}
</select>
) : (
<input
className="input input-bordered join-item"
value={dataset}
onChange={(e) => {
setDataset(e.target.value);
}}
placeholder="Pls input the public dataset name" />
)}
</div>
</div>
<div className="indicator">
<button className="btn join-item" onClick={() => {
handleonClick();
}}>Search</button>
</div>
</div>
<div className="hero-content text-left">
<span className="text-sm">
<p><b>A search question example: </b></p>
<p>* Give me some function examples about NFT</p>
<p>* 0x73c7448760517E3E6e416b2c130E3c6dB2026A1d</p>
</span>
</div>
</div>
</div>
)
</div>
<div className="bg-gradient-to-r from-blue-500 to-green-500">
<div className="mx-auto w-4/5 max-h-[600px] backdrop-blur-lg backdrop-filter p-10 m-10 rounded-lg opacity-80 shadow-md overflow-auto overflow-y-auto">
<h2 className="text-4xl font-bold mb-1">Search Results</h2>
<span className="text-2xl m-2">
{result.map((res,index)=>(
<div key={index}>
<div className="divider"></div>
<span className="text-xl">Data</span>
<pre className="text-base mb-3">{res.data}</pre>
<span className="text-xl">Metadata</span>
<pre className="text-base">{JSON.stringify(res.metadata,null,2)}</pre>
</div>
))}
</span>
</div>

</div>
</div>
)
};

export default ETHSpace;
Loading