chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,3 @@
|
||||
OPENAI_API_KEY=xxxxxxx
|
||||
OPENAI_MODEL=gpt-4-1106-preview
|
||||
TAVILY_API_KEY=xxxxxxx
|
||||
@@ -0,0 +1,38 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
.yarn/install-state.gz
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
TODO.local.md
|
||||
@@ -0,0 +1,52 @@
|
||||
This is a demo that showcases using CopilotKit to build a PowerPoint like web app.
|
||||
|
||||
## Deploy with Vercel
|
||||
|
||||
To deploy with Vercel, click the button below:
|
||||
|
||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FCopilotKit%2Fdemo-presentation&env=NEXT_PUBLIC_COPILOT_CLOUD_API_KEY,TAVILY_API_KEY,OPENAI_API_KEY&envDescription=By%20setting%20the%20TAVILY_API_KEY%2C%20you%20control%20whether%20the%20web%20search%20capabilities%20are%20enabled.%20Set%20it%20to%20NONE%20to%20disable%20this%20feature.%20To%20use%20TTS%2C%20set%20OPENAI_API%20key%2C%20otherwise%20set%20it%20to%20NONE.&project-name=copilotkit-demo-presentation&repository-name=copilotkit-demo-presentation)
|
||||
|
||||
## Getting Started`
|
||||
|
||||
### 1. install the needed package:
|
||||
|
||||
```bash
|
||||
npm i
|
||||
```
|
||||
|
||||
### 2. Set the required environment variables:
|
||||
|
||||
copy `.env.local.example` to `.env.local` and populate the required environment variables.
|
||||
|
||||
> ⚠️ **Important:** Not all users have access to the GPT-4 model yet. If you don't have access, you can use GPT-3 by setting `OPENAI_MODEL` to `gpt-3.5-turbo` in the `.env.local` file.
|
||||
|
||||
**If you want online research to work, you only need a tavily API key, which you can obtain here: https://tavily.com/**
|
||||
|
||||
### 3. Run the app
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
## Zoom in on the CopilotKit code
|
||||
|
||||
1. Search for `useMakeCopilotReadable` to see where frontend application information is being made accessible to the Copilot engine
|
||||
|
||||
2. Search for `useAppendSlide` and `useUpdateSlide` to see where the frontend application action is made accessible to the Copilot engine.
|
||||
|
||||
3. In `route.ts`, see how the backend-running `researchAction` is defined against the `research.ts` agent, powered by LangChain's LangGraph and by Tavily research API.
|
||||
|
||||
```
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about CopilotKit, take a look at the following resources:
|
||||
|
||||
- [CopilotKit Documentation](https://docs.copilotkit.ai/getting-started/quickstart-chatbot) - learn about CopilotKit features and API.
|
||||
- [GitHub](https://github.com/CopilotKit/CopilotKit) - Check out the CopilotKit GitHub repository.
|
||||
- [Discord](https://discord.gg/6dffbvGU3D) - Join the CopilotKit Discord community.
|
||||
```
|
||||
@@ -0,0 +1,4 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {};
|
||||
|
||||
export default nextConfig;
|
||||
+12000
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "copilotkit-demo",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@copilotkit/react-core": "1.3.1",
|
||||
"@copilotkit/react-textarea": "1.3.1",
|
||||
"@copilotkit/react-ui": "1.3.1",
|
||||
"@copilotkit/runtime": "1.3.1",
|
||||
"@copilotkit/shared": "1.3.1",
|
||||
"@heroicons/react": "^2.1.1",
|
||||
"@langchain/community": "^0.0.29",
|
||||
"@langchain/core": "^0.1.29",
|
||||
"@langchain/langgraph": "^0.0.7",
|
||||
"@langchain/openai": "^0.0.14",
|
||||
"clsx": "^2.1.0",
|
||||
"langchain": "^0.1.19",
|
||||
"next": "14.1.0",
|
||||
"openai": "^4.28.0",
|
||||
"react": "^18",
|
||||
"react-dom": "^18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.11.19",
|
||||
"@types/react": "^18.2.55",
|
||||
"@types/react-dom": "^18.2.19",
|
||||
"autoprefixer": "^10.0.1",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
|
||||
|
After Width: | Height: | Size: 629 B |
@@ -0,0 +1,57 @@
|
||||
import { useCopilotAction } from "@copilotkit/react-core";
|
||||
import { SlideModel } from "../types";
|
||||
import { SlidePreview } from "../components/misc/SlidePreview";
|
||||
|
||||
interface AppendSlideParams {
|
||||
setSlides: (fn: (slides: SlideModel[]) => SlideModel[]) => void;
|
||||
setCurrentSlideIndex: (fn: (i: number) => number) => void;
|
||||
slides: SlideModel[];
|
||||
}
|
||||
|
||||
export default function useAppendSlide({
|
||||
setSlides,
|
||||
setCurrentSlideIndex,
|
||||
slides,
|
||||
}: AppendSlideParams) {
|
||||
useCopilotAction({
|
||||
name: "appendSlide",
|
||||
description:
|
||||
"Add a slide after all the existing slides. Call this function multiple times to add multiple slides.",
|
||||
parameters: [
|
||||
{
|
||||
name: "content",
|
||||
description:
|
||||
"The content of the slide. MUST consist of a title, then an empty newline, then a few bullet points. Always between 1-3 bullet points - no more, no less.",
|
||||
},
|
||||
{
|
||||
name: "backgroundImageUrl",
|
||||
description:
|
||||
"The url of the background image for the slide. Use the getImageUrl tool to retrieve a URL for a topic.",
|
||||
},
|
||||
{
|
||||
name: "spokenNarration",
|
||||
description:
|
||||
"The text to read while presenting the slide. Should be distinct from the slide's content, " +
|
||||
"and can include additional context, references, etc. Will be read aloud as-is. " +
|
||||
"Should be a few sentences long, clear, and smooth to read." +
|
||||
"DO NOT include meta-commentary, such as 'in this slide', 'we explore', etc.",
|
||||
},
|
||||
],
|
||||
|
||||
handler: async ({ content, backgroundImageUrl, spokenNarration }) => {
|
||||
const newSlide: SlideModel = {
|
||||
content,
|
||||
backgroundImageUrl,
|
||||
spokenNarration,
|
||||
};
|
||||
|
||||
setSlides((slides) => [...slides, newSlide]);
|
||||
setCurrentSlideIndex((i) => slides.length);
|
||||
},
|
||||
render: (props) => {
|
||||
return (
|
||||
<SlidePreview {...props.args} done={props.status === "complete"} />
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { useCopilotAction } from "@copilotkit/react-core";
|
||||
import { SlideModel } from "../types";
|
||||
import { SlidePreview } from "../components/misc/SlidePreview";
|
||||
|
||||
interface UpdateSlideParams {
|
||||
partialUpdateSlide: (partialSlide: Partial<SlideModel>) => void;
|
||||
}
|
||||
|
||||
export default function useUpdateSlide({
|
||||
partialUpdateSlide,
|
||||
}: UpdateSlideParams) {
|
||||
useCopilotAction({
|
||||
name: "updateSlide",
|
||||
description: "Update the current slide.",
|
||||
parameters: [
|
||||
{
|
||||
name: "content",
|
||||
description:
|
||||
"The content of the slide. Should generally consist of a few bullet points.",
|
||||
},
|
||||
{
|
||||
name: "backgroundImageUrl",
|
||||
description:
|
||||
"The url of the background image for the slide. Use the getImageUrl tool to retrieve a URL for a topic.",
|
||||
},
|
||||
{
|
||||
name: "spokenNarration",
|
||||
description:
|
||||
"The spoken narration for the slide. This is what the user will hear when the slide is shown.",
|
||||
},
|
||||
],
|
||||
handler: async ({ content, backgroundImageUrl, spokenNarration }) => {
|
||||
partialUpdateSlide({
|
||||
content,
|
||||
backgroundImageUrl,
|
||||
spokenNarration,
|
||||
});
|
||||
},
|
||||
render: (props) => {
|
||||
return (
|
||||
<SlidePreview {...props.args} done={props.status === "complete"} />
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,256 @@
|
||||
/**
|
||||
* This is a port of GPT Newspaper to LangGraph JS, adapted from the original Python code.
|
||||
*
|
||||
* https://github.com/assafelovic/gpt-newspaper
|
||||
*/
|
||||
import { HumanMessage, SystemMessage } from "@langchain/core/messages";
|
||||
import { ChatOpenAI } from "@langchain/openai";
|
||||
import { StateGraph, END } from "@langchain/langgraph";
|
||||
import { RunnableLambda } from "@langchain/core/runnables";
|
||||
import { TavilySearchAPIRetriever } from "@langchain/community/retrievers/tavily_search_api";
|
||||
|
||||
interface AgentState {
|
||||
topic: string;
|
||||
searchResults?: string;
|
||||
article?: string;
|
||||
critique?: string;
|
||||
}
|
||||
|
||||
function model() {
|
||||
return new ChatOpenAI({
|
||||
temperature: 0,
|
||||
modelName: "gpt-3.5-turbo-0125",
|
||||
});
|
||||
}
|
||||
|
||||
async function search(state: {
|
||||
agentState: AgentState;
|
||||
}): Promise<{ agentState: AgentState }> {
|
||||
const retriever = new TavilySearchAPIRetriever({
|
||||
k: 10,
|
||||
});
|
||||
let topic = state.agentState.topic;
|
||||
// must be at least 5 characters long
|
||||
if (topic.length < 5) {
|
||||
topic = "topic: " + topic;
|
||||
}
|
||||
console.log("searching for topic:", topic);
|
||||
const docs = await retriever.getRelevantDocuments(topic);
|
||||
console.log("search result length:", docs.length);
|
||||
return {
|
||||
agentState: {
|
||||
...state.agentState,
|
||||
searchResults: JSON.stringify(docs),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async function curate(state: {
|
||||
agentState: AgentState;
|
||||
}): Promise<{ agentState: AgentState }> {
|
||||
console.log("curating search results");
|
||||
const response = await model().invoke(
|
||||
[
|
||||
new SystemMessage(
|
||||
`You are a personal newspaper editor.
|
||||
Your sole task is to return a list of URLs of the 5 most relevant articles for the provided topic or query as a JSON list of strings
|
||||
in this format:
|
||||
{
|
||||
urls: ["url1", "url2", "url3", "url4", "url5"]
|
||||
}
|
||||
.`.replace(/\s+/g, " "),
|
||||
),
|
||||
new HumanMessage(
|
||||
`Today's date is ${new Date().toLocaleDateString("en-GB")}.
|
||||
Topic or Query: ${state.agentState.topic}
|
||||
|
||||
Here is a list of articles:
|
||||
${state.agentState.searchResults}`.replace(/\s+/g, " "),
|
||||
),
|
||||
],
|
||||
{
|
||||
response_format: {
|
||||
type: "json_object",
|
||||
},
|
||||
},
|
||||
);
|
||||
const urls = JSON.parse(response.content as string).urls;
|
||||
const searchResults = JSON.parse(state.agentState.searchResults!);
|
||||
const newSearchResults = searchResults.filter((result: any) => {
|
||||
return urls.includes(result.metadata.source);
|
||||
});
|
||||
console.log("curated search results:", newSearchResults);
|
||||
return {
|
||||
agentState: {
|
||||
...state.agentState,
|
||||
searchResults: JSON.stringify(newSearchResults),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async function critique(state: {
|
||||
agentState: AgentState;
|
||||
}): Promise<{ agentState: AgentState }> {
|
||||
console.log("critiquing article");
|
||||
let feedbackInstructions = "";
|
||||
if (state.agentState.critique) {
|
||||
feedbackInstructions =
|
||||
`The writer has revised the article based on your previous critique: ${state.agentState.critique}
|
||||
The writer might have left feedback for you encoded between <FEEDBACK> tags.
|
||||
The feedback is only for you to see and will be removed from the final article.
|
||||
`.replace(/\s+/g, " ");
|
||||
}
|
||||
const response = await model().invoke([
|
||||
new SystemMessage(
|
||||
`You are a personal newspaper writing critique. Your sole purpose is to provide short feedback on a written
|
||||
article so the writer will know what to fix.
|
||||
Today's date is ${new Date().toLocaleDateString("en-GB")}
|
||||
Your task is to provide a really short feedback on the article only if necessary.
|
||||
if you think the article is good, please return [DONE].
|
||||
you can provide feedback on the revised article or just
|
||||
return [DONE] if you think the article is good.
|
||||
Please return a string of your critique or [DONE].`.replace(/\s+/g, " "),
|
||||
),
|
||||
new HumanMessage(
|
||||
`${feedbackInstructions}
|
||||
This is the article: ${state.agentState.article}`,
|
||||
),
|
||||
]);
|
||||
const content = response.content as string;
|
||||
console.log("critique:", content);
|
||||
return {
|
||||
agentState: {
|
||||
...state.agentState,
|
||||
critique: content.includes("[DONE]") ? undefined : content,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async function write(state: {
|
||||
agentState: AgentState;
|
||||
}): Promise<{ agentState: AgentState }> {
|
||||
console.log("writing article");
|
||||
const response = await model().invoke([
|
||||
new SystemMessage(
|
||||
`You are a personal newspaper writer. Your sole purpose is to write a well-written article about a
|
||||
topic using a list of articles. Write 5 paragraphs in markdown.`.replace(
|
||||
/\s+/g,
|
||||
" ",
|
||||
),
|
||||
),
|
||||
new HumanMessage(
|
||||
`Today's date is ${new Date().toLocaleDateString("en-GB")}.
|
||||
Your task is to write a critically acclaimed article for me about the provided query or
|
||||
topic based on the sources.
|
||||
Here is a list of articles: ${state.agentState.searchResults}
|
||||
This is the topic: ${state.agentState.topic}
|
||||
Please return a well-written article based on the provided information.`.replace(
|
||||
/\s+/g,
|
||||
" ",
|
||||
),
|
||||
),
|
||||
]);
|
||||
const content = response.content as string;
|
||||
console.log("article:", content);
|
||||
return {
|
||||
agentState: {
|
||||
...state.agentState,
|
||||
article: content,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async function revise(state: {
|
||||
agentState: AgentState;
|
||||
}): Promise<{ agentState: AgentState }> {
|
||||
console.log("revising article");
|
||||
const response = await model().invoke([
|
||||
new SystemMessage(
|
||||
`You are a personal newspaper editor. Your sole purpose is to edit a well-written article about a
|
||||
topic based on given critique.`.replace(/\s+/g, " "),
|
||||
),
|
||||
new HumanMessage(
|
||||
`Your task is to edit the article based on the critique given.
|
||||
This is the article: ${state.agentState.article}
|
||||
This is the critique: ${state.agentState.critique}
|
||||
Please return the edited article based on the critique given.
|
||||
You may leave feedback about the critique encoded between <FEEDBACK> tags like this:
|
||||
<FEEDBACK> here goes the feedback ...</FEEDBACK>`.replace(/\s+/g, " "),
|
||||
),
|
||||
]);
|
||||
const content = response.content as string;
|
||||
console.log("revised article:", content);
|
||||
return {
|
||||
agentState: {
|
||||
...state.agentState,
|
||||
article: content,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const agentState = {
|
||||
agentState: {
|
||||
value: (x: AgentState, y: AgentState) => y,
|
||||
default: () => ({
|
||||
topic: "",
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
// Define the function that determines whether to continue or not
|
||||
const shouldContinue = (state: { agentState: AgentState }) => {
|
||||
const result = state.agentState.critique === undefined ? "end" : "continue";
|
||||
return result;
|
||||
};
|
||||
|
||||
const workflow = new StateGraph({
|
||||
channels: agentState,
|
||||
});
|
||||
|
||||
workflow.addNode("search", new RunnableLambda({ func: search }) as any);
|
||||
workflow.addNode("curate", new RunnableLambda({ func: curate }) as any);
|
||||
workflow.addNode("write", new RunnableLambda({ func: write }) as any);
|
||||
workflow.addNode("critique", new RunnableLambda({ func: critique }) as any);
|
||||
workflow.addNode("revise", new RunnableLambda({ func: revise }) as any);
|
||||
|
||||
workflow.addEdge("search", "curate");
|
||||
workflow.addEdge("curate", "write");
|
||||
workflow.addEdge("write", "critique");
|
||||
|
||||
// We now add a conditional edge
|
||||
workflow.addConditionalEdges(
|
||||
// First, we define the start node. We use `agent`.
|
||||
// This means these are the edges taken after the `agent` node is called.
|
||||
"critique",
|
||||
// Next, we pass in the function that will determine which node is called next.
|
||||
shouldContinue,
|
||||
// Finally we pass in a mapping.
|
||||
// The keys are strings, and the values are other nodes.
|
||||
// END is a special node marking that the graph should finish.
|
||||
// What will happen is we will call `should_continue`, and then the output of that
|
||||
// will be matched against the keys in this mapping.
|
||||
// Based on which one it matches, that node will then be called.
|
||||
{
|
||||
// If `tools`, then we call the tool node.
|
||||
continue: "revise",
|
||||
// Otherwise we finish.
|
||||
end: END,
|
||||
},
|
||||
);
|
||||
|
||||
workflow.addEdge("revise", "critique");
|
||||
|
||||
workflow.setEntryPoint("search");
|
||||
const app = workflow.compile();
|
||||
|
||||
export async function researchWithLangGraph(topic: string) {
|
||||
const inputs = {
|
||||
agentState: {
|
||||
topic,
|
||||
},
|
||||
};
|
||||
const result = await app.invoke(inputs);
|
||||
const regex = /<FEEDBACK>[\s\S]*?<\/FEEDBACK>/g;
|
||||
const article = result.agentState.article.replace(regex, "");
|
||||
return article;
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import { researchWithLangGraph } from "./research";
|
||||
import { Action } from "@copilotkit/shared";
|
||||
import { NextRequest } from "next/server";
|
||||
import {
|
||||
CopilotRuntime,
|
||||
copilotRuntimeNextJSAppRouterEndpoint,
|
||||
OpenAIAdapter,
|
||||
} from "@copilotkit/runtime";
|
||||
|
||||
const UNSPLASH_ACCESS_KEY_ENV = "UNSPLASH_ACCESS_KEY";
|
||||
const UNSPLASH_ACCESS_KEY = process.env[UNSPLASH_ACCESS_KEY_ENV];
|
||||
|
||||
const researchAction: Action<any> = {
|
||||
name: "research",
|
||||
description:
|
||||
"Call this function to conduct research on a certain topic. Respect other notes about when to call this function",
|
||||
parameters: [
|
||||
{
|
||||
name: "topic",
|
||||
type: "string",
|
||||
description: "The topic to research. 5 characters or longer.",
|
||||
},
|
||||
],
|
||||
handler: async ({ topic }) => {
|
||||
console.log("Researching topic: ", topic);
|
||||
return await researchWithLangGraph(topic);
|
||||
},
|
||||
};
|
||||
|
||||
export const POST = async (req: NextRequest) => {
|
||||
const actions: Action<any>[] = [
|
||||
{
|
||||
name: "getImageUrl",
|
||||
description: "Get an image url for a topic",
|
||||
parameters: [
|
||||
{
|
||||
name: "topic",
|
||||
description: "The topic of the image",
|
||||
},
|
||||
],
|
||||
handler: async ({ topic }) => {
|
||||
if (UNSPLASH_ACCESS_KEY) {
|
||||
const response = await fetch(
|
||||
`https://api.unsplash.com/search/photos?query=${encodeURIComponent(
|
||||
topic,
|
||||
)}&per_page=10&order_by=relevant&content_filter=high`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Client-ID ${UNSPLASH_ACCESS_KEY}`,
|
||||
},
|
||||
},
|
||||
);
|
||||
const data = await response.json();
|
||||
if (data.results && data.results.length > 0) {
|
||||
const randomIndex = Math.floor(Math.random() * data.results.length);
|
||||
return data.results[randomIndex].urls.regular;
|
||||
}
|
||||
}
|
||||
return (
|
||||
'url("https://loremflickr.com/800/600/' +
|
||||
encodeURIComponent(topic) +
|
||||
'")'
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
if (
|
||||
process.env["TAVILY_API_KEY"] &&
|
||||
process.env["TAVILY_API_KEY"] !== "NONE"
|
||||
) {
|
||||
actions.push(researchAction);
|
||||
}
|
||||
|
||||
const openaiModel = process.env["OPENAI_MODEL"];
|
||||
|
||||
console.log("ENV.COPILOT_CLOUD_API_KEY", process.env.COPILOT_CLOUD_API_KEY);
|
||||
|
||||
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
|
||||
runtime: new CopilotRuntime({ actions }),
|
||||
serviceAdapter: new OpenAIAdapter({ model: openaiModel }),
|
||||
endpoint: req.nextUrl.pathname,
|
||||
});
|
||||
|
||||
return handleRequest(req);
|
||||
};
|
||||
@@ -0,0 +1,31 @@
|
||||
import { OpenAI } from "openai";
|
||||
|
||||
// export const runtime = "edge";
|
||||
|
||||
const openai = new OpenAI();
|
||||
|
||||
export async function POST(req: Request): Promise<Response> {
|
||||
try {
|
||||
const formData = await req.formData();
|
||||
const file = formData.get("file") as File;
|
||||
|
||||
if (!file) {
|
||||
return new Response("File not provided", { status: 400 });
|
||||
}
|
||||
|
||||
const transcription = await openai.audio.transcriptions.create({
|
||||
file,
|
||||
model: "whisper-1",
|
||||
});
|
||||
|
||||
return new Response(JSON.stringify(transcription), {
|
||||
status: 200,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
} catch (error: any) {
|
||||
return new Response(JSON.stringify({ error: error.message }), {
|
||||
status: 500,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { OpenAI } from "openai";
|
||||
|
||||
export const runtime = "edge";
|
||||
|
||||
export async function GET(req: Request): Promise<Response> {
|
||||
const openai = new OpenAI();
|
||||
|
||||
const url = new URL(req.url);
|
||||
const text = url.searchParams.get("text"); // 'text' is the query parameter name
|
||||
|
||||
if (!text) {
|
||||
return new Response("Text parameter is missing", { status: 400 });
|
||||
}
|
||||
|
||||
const response = await openai.audio.speech.create({
|
||||
voice: "alloy",
|
||||
input: text,
|
||||
model: "tts-1",
|
||||
});
|
||||
|
||||
return response;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import clsx from "clsx";
|
||||
|
||||
interface ActionButtonProps {
|
||||
children: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
disabled?: boolean;
|
||||
inProgress?: boolean;
|
||||
}
|
||||
|
||||
export function ActionButton({
|
||||
children,
|
||||
onClick,
|
||||
disabled,
|
||||
inProgress,
|
||||
}: ActionButtonProps) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
disabled={disabled || inProgress}
|
||||
className={clsx(
|
||||
"text-white font-bold w-7 h-7 flex items-center justify-center rounded-md",
|
||||
disabled
|
||||
? "opacity-50 cursor-not-allowed"
|
||||
: "hover:border hover:border-white",
|
||||
inProgress &&
|
||||
"animate-bounce text-blue-400 cursor-not-allowed hover:border-none",
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { SlideModel } from "@/app/types";
|
||||
import { ActionButton } from "./ActionButton";
|
||||
import { PlusCircleIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
interface AddSlideButtonProps {
|
||||
currentSlideIndex: number;
|
||||
setCurrentSlideIndex: (fn: (i: number) => number) => void;
|
||||
setSlides: (fn: (slides: SlideModel[]) => SlideModel[]) => void;
|
||||
}
|
||||
|
||||
export function AddSlideButton({
|
||||
currentSlideIndex,
|
||||
setCurrentSlideIndex,
|
||||
setSlides,
|
||||
}: AddSlideButtonProps) {
|
||||
return (
|
||||
<ActionButton
|
||||
onClick={() => {
|
||||
const newSlide: SlideModel = {
|
||||
content: "",
|
||||
backgroundImageUrl:
|
||||
"https://loremflickr.com/cache/resized/65535_53415810728_d1db6e2660_h_800_600_nofilter.jpg",
|
||||
spokenNarration: "",
|
||||
};
|
||||
setSlides((slides) => [
|
||||
...slides.slice(0, currentSlideIndex + 1),
|
||||
newSlide,
|
||||
...slides.slice(currentSlideIndex + 1),
|
||||
]);
|
||||
setCurrentSlideIndex((i) => i + 1);
|
||||
}}
|
||||
>
|
||||
<PlusCircleIcon className="h-5 w-5" />
|
||||
</ActionButton>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { SlideModel } from "@/app/types";
|
||||
import { ActionButton } from "./ActionButton";
|
||||
import { TrashIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
interface DeleteSlideButtonProps {
|
||||
currentSlideIndex: number;
|
||||
setCurrentSlideIndex: (fn: (i: number) => number) => void;
|
||||
slides: SlideModel[];
|
||||
setSlides: (fn: (slides: SlideModel[]) => SlideModel[]) => void;
|
||||
}
|
||||
|
||||
export function DeleteSlideButton({
|
||||
currentSlideIndex,
|
||||
setCurrentSlideIndex,
|
||||
slides,
|
||||
setSlides,
|
||||
}: DeleteSlideButtonProps) {
|
||||
return (
|
||||
<ActionButton
|
||||
disabled={slides.length == 1}
|
||||
onClick={() => {
|
||||
// delete the current slide
|
||||
setSlides((slides) => [
|
||||
...slides.slice(0, currentSlideIndex),
|
||||
...slides.slice(currentSlideIndex + 1),
|
||||
]);
|
||||
setCurrentSlideIndex((i) => 0);
|
||||
}}
|
||||
>
|
||||
<TrashIcon className="h-5 w-5" />
|
||||
</ActionButton>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { CopilotContextParams, CopilotTask } from "@copilotkit/react-core";
|
||||
import { useState } from "react";
|
||||
import { ActionButton } from "./ActionButton";
|
||||
import { SparklesIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
interface GenerateSlideButtonProps {
|
||||
context: CopilotContextParams;
|
||||
}
|
||||
|
||||
export function GenerateSlideButton({ context }: GenerateSlideButtonProps) {
|
||||
const [isGeneratingSlide, setIsGeneratingSlide] = useState(false);
|
||||
return (
|
||||
<ActionButton
|
||||
inProgress={isGeneratingSlide}
|
||||
onClick={async () => {
|
||||
try {
|
||||
let slideContent = prompt("What should the new slide be about?");
|
||||
if (slideContent === null) {
|
||||
return;
|
||||
}
|
||||
setIsGeneratingSlide(true);
|
||||
const generateSlideTask = new CopilotTask({
|
||||
instructions:
|
||||
"Make a new slide given this user input: " +
|
||||
slideContent +
|
||||
"\n DO NOT carry out research",
|
||||
});
|
||||
await generateSlideTask.run(context);
|
||||
} finally {
|
||||
setIsGeneratingSlide(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SparklesIcon className={"h-5 w-5"} />
|
||||
</ActionButton>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import clsx from "clsx";
|
||||
|
||||
interface NavButtonProps {
|
||||
children: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function NavButton({ children, onClick, disabled }: NavButtonProps) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={clsx(
|
||||
"w-7 h-7 border border-white rounded-md flex justify-center items-center",
|
||||
"focus:outline-none",
|
||||
disabled
|
||||
? "opacity-40 cursor-not-allowed"
|
||||
: "hover:bg-white hover:text-black",
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
interface PerformResearchSwitchProps {
|
||||
isEnabled: boolean;
|
||||
setIsEnabled: (fn: (b: boolean) => boolean) => void;
|
||||
}
|
||||
|
||||
export const PerformResearchSwitch = ({
|
||||
isEnabled,
|
||||
setIsEnabled,
|
||||
}: PerformResearchSwitchProps) => {
|
||||
return (
|
||||
<label className="flex items-center cursor-pointer pl-4">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="sr-only"
|
||||
checked={isEnabled}
|
||||
onChange={() => setIsEnabled((b) => !b)}
|
||||
/>
|
||||
<div
|
||||
className={`w-10 h-4 ${
|
||||
isEnabled ? "bg-blue-500" : "bg-gray-400"
|
||||
} rounded-full shadow-inner transition-colors`}
|
||||
></div>
|
||||
|
||||
<div
|
||||
className={`absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition-transform ${
|
||||
isEnabled ? "transform translate-x-full" : ""
|
||||
}`}
|
||||
></div>
|
||||
</div>
|
||||
<span className="text-sm font-normal ml-2">Perform Research?</span>
|
||||
</label>
|
||||
);
|
||||
};
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
import { useState } from "react";
|
||||
import { ActionButton } from "./ActionButton";
|
||||
import { SpeakerWaveIcon } from "@heroicons/react/24/outline";
|
||||
import { resetGlobalAudio, speak } from "@/app/utils/globalAudio";
|
||||
|
||||
interface SpeakCurrentSlideButtonProps {
|
||||
spokenNarration: string;
|
||||
}
|
||||
|
||||
export function SpeakCurrentSlideButton({
|
||||
spokenNarration,
|
||||
}: SpeakCurrentSlideButtonProps) {
|
||||
const [isSpeaking, setIsSpeaking] = useState(false);
|
||||
return (
|
||||
<ActionButton inProgress={isSpeaking}>
|
||||
<SpeakerWaveIcon
|
||||
className="h-5 w-5"
|
||||
onClick={async () => {
|
||||
resetGlobalAudio();
|
||||
try {
|
||||
setIsSpeaking(true);
|
||||
await speak(spokenNarration);
|
||||
} finally {
|
||||
setIsSpeaking(false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</ActionButton>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import clsx from "clsx";
|
||||
import { SlideModel } from "@/app/types";
|
||||
import { useMemo } from "react";
|
||||
import { useCopilotContext } from "@copilotkit/react-core";
|
||||
import { SlideNumberIndicator } from "../misc/SlideNumberIndicator";
|
||||
import { GenerateSlideButton } from "../buttons/GenerateSlideButton";
|
||||
import { SpeakCurrentSlideButton } from "../buttons/SpeakCurrentSlideButton";
|
||||
import { DeleteSlideButton } from "../buttons/DeleteSlideButton";
|
||||
import { NavButton } from "../buttons/NavButton";
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
|
||||
import { PerformResearchSwitch } from "../buttons/PerformResearchSwitch";
|
||||
import { AddSlideButton } from "../buttons/AddSlideButton";
|
||||
|
||||
interface HeaderProps {
|
||||
currentSlideIndex: number;
|
||||
setCurrentSlideIndex: (fn: (i: number) => number) => void;
|
||||
slides: SlideModel[];
|
||||
setSlides: (fn: (slides: SlideModel[]) => SlideModel[]) => void;
|
||||
performResearch: boolean;
|
||||
setPerformResearch: (fn: (b: boolean) => boolean) => void;
|
||||
}
|
||||
|
||||
export function Header({
|
||||
currentSlideIndex,
|
||||
setCurrentSlideIndex,
|
||||
slides,
|
||||
setSlides,
|
||||
performResearch,
|
||||
setPerformResearch,
|
||||
}: HeaderProps) {
|
||||
const currentSlide = useMemo(
|
||||
() => slides[currentSlideIndex],
|
||||
[slides, currentSlideIndex],
|
||||
);
|
||||
|
||||
/**
|
||||
* We need to get the context here to run a Copilot task for generating a slide
|
||||
**/
|
||||
const context = useCopilotContext();
|
||||
|
||||
return (
|
||||
<header className={clsx("bg-customBlack text-white items-center flex p-4")}>
|
||||
<div className="flex-0 flex space-x-1">
|
||||
{/* Back */}
|
||||
<NavButton
|
||||
disabled={currentSlideIndex == 0}
|
||||
onClick={() => setCurrentSlideIndex((i) => i - 1)}
|
||||
>
|
||||
<ChevronLeftIcon className="h-6 w-6" />
|
||||
</NavButton>
|
||||
|
||||
{/* Forward */}
|
||||
<NavButton
|
||||
disabled={currentSlideIndex == slides.length - 1}
|
||||
onClick={() => setCurrentSlideIndex((i) => i + 1)}
|
||||
>
|
||||
<ChevronRightIcon className="h-6 w-6" />
|
||||
</NavButton>
|
||||
|
||||
{/* Perform Research */}
|
||||
<PerformResearchSwitch
|
||||
isEnabled={performResearch}
|
||||
setIsEnabled={setPerformResearch}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SlideNumberIndicator
|
||||
{...{ currentSlideIndex, totalSlides: slides.length }}
|
||||
/>
|
||||
|
||||
<div className="flex-0 flex space-x-1">
|
||||
<AddSlideButton
|
||||
{...{ currentSlideIndex, setCurrentSlideIndex, setSlides }}
|
||||
/>
|
||||
|
||||
<GenerateSlideButton context={context} />
|
||||
|
||||
<SpeakCurrentSlideButton
|
||||
spokenNarration={currentSlide.spokenNarration}
|
||||
/>
|
||||
|
||||
<DeleteSlideButton
|
||||
{...{ currentSlideIndex, setCurrentSlideIndex, slides, setSlides }}
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
"use client";
|
||||
import { useCopilotReadable } from "@copilotkit/react-core";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { Slide } from "./Slide";
|
||||
import { Header } from "./Header";
|
||||
import useAppendSlide from "../../actions/useAppendSlide";
|
||||
import { SlideModel } from "@/app/types";
|
||||
|
||||
interface PresentationProps {
|
||||
performResearch: boolean;
|
||||
setPerformResearch: (fn: (b: boolean) => boolean) => void;
|
||||
}
|
||||
|
||||
export const Presentation = ({
|
||||
performResearch,
|
||||
setPerformResearch,
|
||||
}: PresentationProps) => {
|
||||
const [slides, setSlides] = useState<SlideModel[]>([
|
||||
{
|
||||
content: "This is the first slide.",
|
||||
backgroundImageUrl:
|
||||
"https://loremflickr.com/cache/resized/65535_53415810728_d1db6e2660_h_800_600_nofilter.jpg",
|
||||
spokenNarration: "This is the first slide. Welcome to our presentation!",
|
||||
},
|
||||
]);
|
||||
const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
|
||||
const currentSlide = useMemo(
|
||||
() => slides[currentSlideIndex],
|
||||
[slides, currentSlideIndex],
|
||||
);
|
||||
|
||||
/**
|
||||
* This makes all slides available to the Copilot.
|
||||
*/
|
||||
useCopilotReadable({
|
||||
description: "These are all the slides",
|
||||
value: slides,
|
||||
});
|
||||
|
||||
/**
|
||||
* This makes the current slide available to the Copilot.
|
||||
*/
|
||||
useCopilotReadable({
|
||||
description: "This is the current slide",
|
||||
value: currentSlide,
|
||||
});
|
||||
|
||||
/**
|
||||
* This action allows the Copilot to append a new slide to the presentation.
|
||||
*/
|
||||
useAppendSlide({
|
||||
setSlides,
|
||||
setCurrentSlideIndex,
|
||||
slides,
|
||||
});
|
||||
|
||||
const updateCurrentSlide = useCallback(
|
||||
(partialSlide: Partial<SlideModel>) => {
|
||||
setSlides((slides) => [
|
||||
...slides.slice(0, currentSlideIndex),
|
||||
{ ...slides[currentSlideIndex], ...partialSlide },
|
||||
...slides.slice(currentSlideIndex + 1),
|
||||
]);
|
||||
},
|
||||
[currentSlideIndex, setSlides],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: `100vh`,
|
||||
}}
|
||||
className="flex flex-col"
|
||||
>
|
||||
<Header
|
||||
currentSlideIndex={currentSlideIndex}
|
||||
setCurrentSlideIndex={setCurrentSlideIndex}
|
||||
slides={slides}
|
||||
setSlides={setSlides}
|
||||
performResearch={performResearch}
|
||||
setPerformResearch={setPerformResearch}
|
||||
/>
|
||||
<div
|
||||
className="flex items-center justify-center flex-1"
|
||||
style={{ backgroundColor: "#414247", overflow: "auto" }}
|
||||
>
|
||||
<div
|
||||
className="aspect-ratio-box bg-white flex shadow-2xl"
|
||||
style={{ margin: "5rem", maxHeight: "70vh" }}
|
||||
>
|
||||
<Slide slide={currentSlide} partialUpdateSlide={updateCurrentSlide} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,101 @@
|
||||
"use client";
|
||||
import useUpdateSlide from "../../actions/useUpdateSlide";
|
||||
import { SlideModel } from "@/app/types";
|
||||
|
||||
export interface SlideProps {
|
||||
slide: SlideModel;
|
||||
partialUpdateSlide: (partialSlide: Partial<SlideModel>) => void;
|
||||
}
|
||||
|
||||
export const Slide = (props: SlideProps) => {
|
||||
const backgroundImage = `url("${props.slide.backgroundImageUrl}")`;
|
||||
|
||||
/**
|
||||
* This action allows the Copilot to update the current slide.
|
||||
*/
|
||||
useUpdateSlide({ partialUpdateSlide: props.partialUpdateSlide });
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-row bg-white">
|
||||
<div className="flex-grow h-full flex flex-col" style={{ flex: "2" }}>
|
||||
<SlideContent
|
||||
content={props.slide.content}
|
||||
onChange={(newContent) => {
|
||||
props.partialUpdateSlide({ content: newContent });
|
||||
}}
|
||||
/>
|
||||
<SlideSpeakerNotes
|
||||
spokenNarration={props.slide.spokenNarration}
|
||||
onChange={(newSpokenNarration) => {
|
||||
props.partialUpdateSlide({ spokenNarration: newSpokenNarration });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<SlideImage backgroundImage={backgroundImage} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function SlideImage({ backgroundImage }: { backgroundImage: string }) {
|
||||
return (
|
||||
<div
|
||||
className="flex-grow h-full bg-slate-200"
|
||||
style={{
|
||||
flex: "1",
|
||||
backgroundImage,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
interface SpeakerNotesProps {
|
||||
spokenNarration: string;
|
||||
onChange: (newSpokenNarration: string) => void;
|
||||
}
|
||||
|
||||
function SlideSpeakerNotes({ spokenNarration, onChange }: SpeakerNotesProps) {
|
||||
return (
|
||||
<div className="bg-gray-200 relative h-20 flex flex-col">
|
||||
<textarea
|
||||
className="w-full h-full bg-transparent p-2 text-base"
|
||||
style={{
|
||||
border: "none",
|
||||
outline: "none",
|
||||
lineHeight: "1.5",
|
||||
resize: "none",
|
||||
}}
|
||||
placeholder="Speaker notes..."
|
||||
value={spokenNarration}
|
||||
onChange={(e) => {
|
||||
onChange(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface SlideContentProps {
|
||||
content: string;
|
||||
onChange: (newContent: string) => void;
|
||||
}
|
||||
|
||||
function SlideContent({ content, onChange }: SlideContentProps) {
|
||||
return (
|
||||
<textarea
|
||||
className="flex-1 w-full text-gray-800 p-4 px-10 font-bold flex items-center line-clamp-6"
|
||||
style={{
|
||||
border: "none",
|
||||
outline: "none",
|
||||
resize: "none",
|
||||
fontSize: "2vw",
|
||||
}}
|
||||
value={content}
|
||||
placeholder="Slide content..."
|
||||
onChange={(e) => {
|
||||
onChange(e.target.value);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
interface SlideNumberIndicatorProps {
|
||||
currentSlideIndex: number;
|
||||
totalSlides: number;
|
||||
}
|
||||
|
||||
export function SlideNumberIndicator({
|
||||
currentSlideIndex,
|
||||
totalSlides,
|
||||
}: SlideNumberIndicatorProps) {
|
||||
return (
|
||||
<div className="flex-1 items-center justify-center flex uppercase text-xs font-bold tracking-widest">
|
||||
<span className="mr-3">{SLIDES_ICON}</span>
|
||||
Slide {currentSlideIndex + 1} of {totalSlides}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const SLIDES_ICON = (
|
||||
<svg
|
||||
width="10px"
|
||||
height="10px"
|
||||
viewBox="0 0 42 42"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
>
|
||||
<rect x="0" y="0" width="10" height="10" />
|
||||
<rect x="16" y="0" width="10" height="10" />
|
||||
<rect x="32" y="0" width="10" height="10" />
|
||||
<rect x="0" y="16" width="10" height="10" />
|
||||
<rect x="16" y="16" width="10" height="10" />
|
||||
<rect x="32" y="16" width="10" height="10" />
|
||||
<rect x="0" y="32" width="10" height="10" />
|
||||
<rect x="16" y="32" width="10" height="10" />
|
||||
<rect x="32" y="32" width="10" height="10" />
|
||||
</svg>
|
||||
);
|
||||
@@ -0,0 +1,33 @@
|
||||
interface SlidePreviewProps {
|
||||
title?: string;
|
||||
content?: string;
|
||||
spokenNarration?: string;
|
||||
done?: boolean;
|
||||
}
|
||||
|
||||
export function SlidePreview({
|
||||
content,
|
||||
spokenNarration,
|
||||
done,
|
||||
}: SlidePreviewProps) {
|
||||
return (
|
||||
<div className="">
|
||||
<div className=" w-full relative max-w-xs">
|
||||
<div className="absolute inset-0 h-full w-full bg-gradient-to-r from-blue-500 to-teal-500 transform scale-[0.80] bg-red-500 rounded-full blur-3xl" />
|
||||
<div className="relative shadow-xl bg-gray-900 border border-gray-800 px-4 py-8 h-full overflow-hidden rounded-2xl flex flex-col justify-end items-start">
|
||||
<h1 className="font-bold text-xl text-white mb-4 relative z-50">
|
||||
{done ? "Slide added" : "Adding slide..."}
|
||||
</h1>
|
||||
<p className="font-normal text-base text-slate-500 mb-4 relative z-50 whitespace-pre">
|
||||
{content}
|
||||
</p>
|
||||
{spokenNarration && (
|
||||
<p className="font-normal text-sm text-slate-500 mb-4 relative z-50">
|
||||
"{spokenNarration}"
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,46 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--copilot-kit-primary-color: #222222 !important;
|
||||
}
|
||||
|
||||
.copilotKitHeader {
|
||||
height: 60px;
|
||||
border-left: 1px solid #555;
|
||||
}
|
||||
|
||||
.copilotKitWindow.open {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.aspect-ratio-box {
|
||||
width: 100%;
|
||||
max-width: calc(100% - 5rem); /* Account for margin */
|
||||
position: relative;
|
||||
}
|
||||
.aspect-ratio-box::before {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-top: 56.25%; /* 16:9 Aspect Ratio */
|
||||
}
|
||||
.aspect-ratio-box > * {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "@copilotkit/react-ui/styles.css";
|
||||
import "@copilotkit/react-textarea/styles.css";
|
||||
import "./globals.css";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
|
||||
export const viewport: Viewport = {
|
||||
themeColor: "#222222",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import { CopilotKit } from "@copilotkit/react-core";
|
||||
import { CopilotSidebar } from "@copilotkit/react-ui";
|
||||
import "./styles.css";
|
||||
import { Presentation } from "./components/main/Presentation";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function AIPresentation() {
|
||||
const [performResearch, setPerformResearch] = useState(false);
|
||||
|
||||
return (
|
||||
<CopilotKit
|
||||
publicApiKey={process.env.NEXT_PUBLIC_COPILOT_CLOUD_API_KEY}
|
||||
// Alternatively, you can use runtimeUrl to host your own CopilotKit Runtime
|
||||
runtimeUrl="/api/copilotkit"
|
||||
transcribeAudioUrl="/api/transcribe"
|
||||
textToSpeechUrl="/api/tts"
|
||||
>
|
||||
<CopilotSidebar
|
||||
instructions={
|
||||
"Help the user create and edit a powerpoint-style presentation." +
|
||||
(!performResearch
|
||||
? " No research is needed. Do not perform any research."
|
||||
: " Perform research on the topic.")
|
||||
}
|
||||
defaultOpen={true}
|
||||
labels={{
|
||||
title: "Presentation Copilot",
|
||||
initial:
|
||||
"Hi you! 👋 I can help you create a presentation on any topic.",
|
||||
}}
|
||||
clickOutsideToClose={false}
|
||||
>
|
||||
<Presentation
|
||||
performResearch={performResearch}
|
||||
setPerformResearch={setPerformResearch}
|
||||
/>
|
||||
</CopilotSidebar>
|
||||
</CopilotKit>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
.markdown h1,
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
font-weight: bold;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 1.25em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin-bottom: 1.25em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown pre {
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
.markdown ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 20px;
|
||||
overflow: visible;
|
||||
text-align: left;
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
.markdown li {
|
||||
list-style-type: inherit;
|
||||
list-style-position: outside;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export interface SlideModel {
|
||||
content: string;
|
||||
backgroundImageUrl: string;
|
||||
spokenNarration: string;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
"use client";
|
||||
|
||||
export let globalAudio: any = undefined;
|
||||
|
||||
export function resetGlobalAudio() {
|
||||
if (globalAudio) {
|
||||
globalAudio.pause();
|
||||
globalAudio.currentTime = 0;
|
||||
} else {
|
||||
globalAudio = new Audio();
|
||||
}
|
||||
}
|
||||
|
||||
export async function speak(text: string) {
|
||||
const encodedText = encodeURIComponent(text);
|
||||
const url = `/api/tts?text=${encodedText}`;
|
||||
globalAudio.src = url;
|
||||
globalAudio.play();
|
||||
await new Promise<void>((resolve) => {
|
||||
globalAudio.onended = function () {
|
||||
resolve();
|
||||
};
|
||||
});
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
backgroundImage: {
|
||||
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
||||
"gradient-conic":
|
||||
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
|
||||
},
|
||||
colors: {
|
||||
customBlack: "#222222",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
export default config;
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Reference in New Issue
Block a user