Adds AI roadmap generator (#5289)
* feat: implement roadmap generator * feat: add roadmap stream * Update UI * fix: add fingerprint visitor id * feat: implement edit generated roadmap * feat: implement ai roadmap download * feat: add limit count * fix: add limit check * fix: download image button * feat: implement roadmap generator * feat: add roadmap stream * Update UI * fix: add fingerprint visitor id * feat: implement edit generated roadmap * feat: implement ai roadmap download * feat: add limit count * fix: add limit check * fix: download image button * UI Updates * Update UI for roadmap search * Update UI for roadmap limit * Update UI for roadmap * UI responsiveness on AI roadmap generator --------- Co-authored-by: Arik Chakma <arikchangma@gmail.com>pull/5291/head
Kamran Ahmed
9 months ago
committed by
GitHub
parent
44d3724880
commit
d5fdc62343
11 changed files with 688 additions and 38 deletions
|
After Width: | Height: | Size: 31 KiB |
@ -0,0 +1,58 @@ |
||||
@font-face { |
||||
font-family: 'balsamiq'; |
||||
src: url('/fonts/balsamiq.woff2'); |
||||
} |
||||
|
||||
svg text tspan { |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
text-rendering: optimizeSpeed; |
||||
} |
||||
|
||||
svg > g[data-type='topic'], |
||||
svg > g[data-type='subtopic'], |
||||
svg > g > g[data-type='link-item'], |
||||
svg > g[data-type='button'] { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
svg > g[data-type='topic']:hover > rect { |
||||
fill: #d6d700; |
||||
} |
||||
|
||||
svg > g[data-type='subtopic']:hover > rect { |
||||
fill: #f3c950; |
||||
} |
||||
svg > g[data-type='button']:hover { |
||||
opacity: 0.8; |
||||
} |
||||
|
||||
svg .done rect { |
||||
fill: #cbcbcb !important; |
||||
} |
||||
|
||||
svg .done text, |
||||
svg .skipped text { |
||||
text-decoration: line-through; |
||||
} |
||||
|
||||
svg > g[data-type='topic'].learning > rect + text, |
||||
svg > g[data-type='topic'].done > rect + text { |
||||
fill: black; |
||||
} |
||||
|
||||
svg > g[data-type='subtipic'].done > rect + text, |
||||
svg > g[data-type='subtipic'].learning > rect + text { |
||||
fill: #cbcbcb; |
||||
} |
||||
|
||||
svg .learning rect { |
||||
fill: #dad1fd !important; |
||||
} |
||||
svg .learning text { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
svg .skipped rect { |
||||
fill: #496b69 !important; |
||||
} |
||||
@ -0,0 +1,361 @@ |
||||
import { type FormEvent, useEffect, useRef, useState } from 'react'; |
||||
import './GenerateRoadmap.css'; |
||||
import { useToast } from '../../hooks/use-toast'; |
||||
import { generateAIRoadmapFromText } from '../../../editor/utils/roadmap-generator'; |
||||
import { renderFlowJSON } from '../../../editor/renderer/renderer'; |
||||
import { replaceChildren } from '../../lib/dom'; |
||||
import { readAIRoadmapStream } from '../../helper/read-stream'; |
||||
import { isLoggedIn, removeAuthToken } from '../../lib/jwt'; |
||||
import { RoadmapSearch } from './RoadmapSearch.tsx'; |
||||
import { Spinner } from '../ReactIcons/Spinner.tsx'; |
||||
import { Ban, Download, PenSquare, Wand } from 'lucide-react'; |
||||
import { ShareRoadmapButton } from '../ShareRoadmapButton.tsx'; |
||||
import { httpGet, httpPost } from '../../lib/http.ts'; |
||||
import { pageProgressMessage } from '../../stores/page.ts'; |
||||
import { |
||||
deleteUrlParam, |
||||
getUrlParams, |
||||
setUrlParams, |
||||
} from '../../lib/browser.ts'; |
||||
import { downloadGeneratedRoadmapImage } from '../../helper/download-image.ts'; |
||||
import { showLoginPopup } from '../../lib/popup.ts'; |
||||
import { cn } from '../../lib/classname.ts'; |
||||
|
||||
const ROADMAP_ID_REGEX = new RegExp('@ROADMAPID:(\\w+)@'); |
||||
|
||||
export function GenerateRoadmap() { |
||||
const roadmapContainerRef = useRef<HTMLDivElement>(null); |
||||
|
||||
const { id: roadmapId } = getUrlParams() as { id: string }; |
||||
const toast = useToast(); |
||||
|
||||
const [hasSubmitted, setHasSubmitted] = useState<boolean>(false); |
||||
const [isLoading, setIsLoading] = useState(false); |
||||
const [roadmapTopic, setRoadmapTopic] = useState(''); |
||||
const [generatedRoadmap, setGeneratedRoadmap] = useState(''); |
||||
|
||||
const [roadmapLimit, setRoadmapLimit] = useState(0); |
||||
const [roadmapLimitUsed, setRoadmapLimitUsed] = useState(0); |
||||
|
||||
const renderRoadmap = async (roadmap: string) => { |
||||
const { nodes, edges } = generateAIRoadmapFromText(roadmap); |
||||
const svg = await renderFlowJSON({ nodes, edges }); |
||||
if (roadmapContainerRef?.current) { |
||||
replaceChildren(roadmapContainerRef?.current, svg); |
||||
} |
||||
}; |
||||
|
||||
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => { |
||||
e.preventDefault(); |
||||
if (!roadmapTopic) { |
||||
return; |
||||
} |
||||
|
||||
setIsLoading(true); |
||||
setHasSubmitted(true); |
||||
|
||||
if (roadmapLimitUsed >= roadmapLimit) { |
||||
toast.error('You have reached your limit of generating roadmaps'); |
||||
setIsLoading(false); |
||||
return; |
||||
} |
||||
|
||||
deleteUrlParam('id'); |
||||
|
||||
const response = await fetch( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-generate-ai-roadmap`, |
||||
{ |
||||
method: 'POST', |
||||
headers: { |
||||
'Content-Type': 'application/json', |
||||
}, |
||||
credentials: 'include', |
||||
body: JSON.stringify({ topic: roadmapTopic }), |
||||
}, |
||||
); |
||||
|
||||
if (!response.ok) { |
||||
const data = await response.json(); |
||||
|
||||
toast.error(data?.message || 'Something went wrong'); |
||||
setIsLoading(false); |
||||
|
||||
// Logout user if token is invalid
|
||||
if (data.status === 401) { |
||||
removeAuthToken(); |
||||
window.location.reload(); |
||||
} |
||||
} |
||||
|
||||
const reader = response.body?.getReader(); |
||||
|
||||
if (!reader) { |
||||
setIsLoading(false); |
||||
toast.error('Something went wrong'); |
||||
return; |
||||
} |
||||
|
||||
await readAIRoadmapStream(reader, { |
||||
onStream: async (result) => { |
||||
if (result.includes('@ROADMAPID')) { |
||||
// @ROADMAPID: is a special token that we use to identify the roadmap
|
||||
// @ROADMAPID:1234@ is the format, we will remove the token and the id
|
||||
// and replace it with a empty string
|
||||
const roadmapId = result.match(ROADMAP_ID_REGEX)?.[1] || ''; |
||||
setUrlParams({ id: roadmapId }); |
||||
result = result.replace(ROADMAP_ID_REGEX, ''); |
||||
} |
||||
|
||||
await renderRoadmap(result); |
||||
}, |
||||
onStreamEnd: async (result) => { |
||||
result = result.replace(ROADMAP_ID_REGEX, ''); |
||||
setGeneratedRoadmap(result); |
||||
loadAIRoadmapLimit().finally(() => {}); |
||||
}, |
||||
}); |
||||
|
||||
setIsLoading(false); |
||||
}; |
||||
|
||||
const editGeneratedRoadmap = async () => { |
||||
if (!isLoggedIn()) { |
||||
showLoginPopup(); |
||||
return; |
||||
} |
||||
|
||||
pageProgressMessage.set('Redirecting to Editor'); |
||||
|
||||
const { nodes, edges } = generateAIRoadmapFromText(generatedRoadmap); |
||||
|
||||
const { response, error } = await httpPost<{ |
||||
roadmapId: string; |
||||
}>(`${import.meta.env.PUBLIC_API_URL}/v1-edit-ai-generated-roadmap`, { |
||||
title: roadmapTopic, |
||||
nodes: nodes.map((node) => ({ |
||||
...node, |
||||
|
||||
// To reset the width and height of the node
|
||||
// so that it can be calculated based on the content in the editor
|
||||
width: undefined, |
||||
height: undefined, |
||||
style: { |
||||
...node.style, |
||||
width: undefined, |
||||
height: undefined, |
||||
}, |
||||
})), |
||||
edges, |
||||
}); |
||||
|
||||
if (error || !response) { |
||||
toast.error(error?.message || 'Something went wrong'); |
||||
setIsLoading(false); |
||||
return; |
||||
} |
||||
|
||||
window.location.href = `${import.meta.env.PUBLIC_EDITOR_APP_URL}/${response.roadmapId}`; |
||||
}; |
||||
|
||||
const downloadGeneratedRoadmap = async () => { |
||||
pageProgressMessage.set('Downloading Roadmap'); |
||||
|
||||
const node = document.getElementById('roadmap-container'); |
||||
if (!node) { |
||||
toast.error('Something went wrong'); |
||||
return; |
||||
} |
||||
|
||||
try { |
||||
await downloadGeneratedRoadmapImage(roadmapTopic, node); |
||||
pageProgressMessage.set(''); |
||||
} catch (error) { |
||||
console.error(error); |
||||
toast.error('Something went wrong'); |
||||
} |
||||
}; |
||||
|
||||
const loadAIRoadmapLimit = async () => { |
||||
const { response, error } = await httpGet<{ |
||||
limit: number; |
||||
used: number; |
||||
}>(`${import.meta.env.PUBLIC_API_URL}/v1-get-ai-roadmap-limit`); |
||||
|
||||
if (error || !response) { |
||||
toast.error(error?.message || 'Something went wrong'); |
||||
return; |
||||
} |
||||
|
||||
const { limit, used } = response; |
||||
setRoadmapLimit(limit); |
||||
setRoadmapLimitUsed(used); |
||||
}; |
||||
|
||||
const loadAIRoadmap = async (roadmapId: string) => { |
||||
pageProgressMessage.set('Loading Roadmap'); |
||||
|
||||
const { response, error } = await httpGet<{ |
||||
topic: string; |
||||
data: string; |
||||
}>(`${import.meta.env.PUBLIC_API_URL}/v1-get-ai-roadmap/${roadmapId}`); |
||||
|
||||
if (error || !response) { |
||||
toast.error(error?.message || 'Something went wrong'); |
||||
setIsLoading(false); |
||||
return; |
||||
} |
||||
|
||||
const { topic, data } = response; |
||||
await renderRoadmap(data); |
||||
|
||||
setRoadmapTopic(topic); |
||||
setGeneratedRoadmap(data); |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
loadAIRoadmapLimit().finally(() => {}); |
||||
}, []); |
||||
|
||||
useEffect(() => { |
||||
if (!roadmapId) { |
||||
return; |
||||
} |
||||
|
||||
setHasSubmitted(true); |
||||
loadAIRoadmap(roadmapId).finally(() => { |
||||
pageProgressMessage.set(''); |
||||
}); |
||||
}, [roadmapId]); |
||||
|
||||
if (!hasSubmitted) { |
||||
return ( |
||||
<RoadmapSearch |
||||
roadmapTopic={roadmapTopic} |
||||
setRoadmapTopic={setRoadmapTopic} |
||||
handleSubmit={handleSubmit} |
||||
limit={roadmapLimit} |
||||
limitUsed={roadmapLimitUsed} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
const pageUrl = `https://roadmap.sh/ai?id=${roadmapId}`; |
||||
const canGenerateMore = roadmapLimitUsed < roadmapLimit; |
||||
|
||||
return ( |
||||
<section className="flex flex-grow flex-col bg-gray-100"> |
||||
<div className="flex items-center justify-center border-b bg-white py-3 sm:py-6"> |
||||
{isLoading && ( |
||||
<span className="flex items-center gap-2 rounded-full bg-black px-3 py-1 text-white"> |
||||
<Spinner isDualRing={false} innerFill={'white'} /> |
||||
Generating roadmap .. |
||||
</span> |
||||
)} |
||||
{!isLoading && ( |
||||
<div className="flex max-w-[600px] flex-grow flex-col items-center px-5"> |
||||
<div className="mt-2 flex w-full items-center justify-between text-sm"> |
||||
<span className="text-gray-800"> |
||||
<span |
||||
className={cn( |
||||
'inline-block w-[65px] rounded-md border px-0.5 text-center text-sm tabular-nums text-gray-800', |
||||
{ |
||||
'animate-pulse border-zinc-300 bg-zinc-300 text-zinc-300': |
||||
!roadmapLimit, |
||||
}, |
||||
)} |
||||
> |
||||
{roadmapLimitUsed} of {roadmapLimit} |
||||
</span>{' '} |
||||
roadmaps generated |
||||
{!isLoggedIn() && ( |
||||
<> |
||||
{' '} |
||||
<button |
||||
className="font-medium text-black underline underline-offset-2" |
||||
onClick={showLoginPopup} |
||||
> |
||||
Login to increase your limit |
||||
</button> |
||||
</> |
||||
)} |
||||
</span> |
||||
</div> |
||||
<form |
||||
onSubmit={handleSubmit} |
||||
className="my-3 flex w-full flex-col sm:flex-row sm:items-center sm:justify-center gap-2" |
||||
> |
||||
<input |
||||
type="text" |
||||
autoFocus |
||||
placeholder="e.g. Ansible" |
||||
className="flex-grow rounded-md border border-gray-400 px-3 py-2 transition-colors focus:border-black focus:outline-none" |
||||
value={roadmapTopic} |
||||
onInput={(e) => |
||||
setRoadmapTopic((e.target as HTMLInputElement).value) |
||||
} |
||||
/> |
||||
<button |
||||
type={'submit'} |
||||
className={cn( |
||||
'flex min-w-[127px] flex-shrink-0 items-center gap-2 rounded-md bg-black px-4 py-2 text-white justify-center', |
||||
{ |
||||
'cursor-not-allowed opacity-50': |
||||
!roadmapLimit || |
||||
!roadmapTopic || |
||||
roadmapLimitUsed >= roadmapLimit, |
||||
}, |
||||
)} |
||||
> |
||||
{roadmapLimit > 0 && canGenerateMore && ( |
||||
<> |
||||
<Wand size={20} /> |
||||
Generate |
||||
</> |
||||
)} |
||||
|
||||
{roadmapLimit === 0 && <span>Please wait..</span>} |
||||
|
||||
{roadmapLimit > 0 && !canGenerateMore && ( |
||||
<span className="flex items-center text-sm"> |
||||
<Ban size={15} className="mr-2" /> |
||||
Limit reached |
||||
</span> |
||||
)} |
||||
</button> |
||||
</form> |
||||
<div className="flex w-full items-center justify-between gap-2"> |
||||
<div className="flex items-center justify-between gap-2"> |
||||
<button |
||||
className="inline-flex items-center justify-center gap-2 rounded-md bg-yellow-400 py-1.5 pl-2.5 pr-3 text-xs font-medium transition-opacity duration-300 hover:bg-yellow-500 sm:text-sm" |
||||
onClick={downloadGeneratedRoadmap} |
||||
> |
||||
<Download size={15} /> |
||||
<span className="hidden sm:inline">Download</span> |
||||
</button> |
||||
{roadmapId && ( |
||||
<ShareRoadmapButton |
||||
description={`Check out ${roadmapTopic} roadmap I generated on roadmap.sh`} |
||||
pageUrl={pageUrl} |
||||
/> |
||||
)} |
||||
</div> |
||||
<button |
||||
className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-200 py-1.5 pl-2.5 pr-3 text-xs font-medium text-black transition-colors duration-300 hover:bg-gray-300 sm:text-sm" |
||||
onClick={editGeneratedRoadmap} |
||||
disabled={isLoading} |
||||
> |
||||
<PenSquare size={15} /> |
||||
Edit in Editor |
||||
</button> |
||||
</div> |
||||
</div> |
||||
)} |
||||
</div> |
||||
<div |
||||
ref={roadmapContainerRef} |
||||
id="roadmap-container" |
||||
className="relative px-4 py-5 [&>svg]:mx-auto [&>svg]:max-w-[1300px]" |
||||
/> |
||||
</section> |
||||
); |
||||
} |
||||
@ -0,0 +1,121 @@ |
||||
import { Ban, Wand } from 'lucide-react'; |
||||
import type { FormEvent } from 'react'; |
||||
import { isLoggedIn } from '../../lib/jwt'; |
||||
import { showLoginPopup } from '../../lib/popup'; |
||||
import { cn } from '../../lib/classname.ts'; |
||||
|
||||
type RoadmapSearchProps = { |
||||
roadmapTopic: string; |
||||
setRoadmapTopic: (topic: string) => void; |
||||
handleSubmit: (e: FormEvent<HTMLFormElement>) => void; |
||||
limit: number; |
||||
limitUsed: number; |
||||
}; |
||||
|
||||
export function RoadmapSearch(props: RoadmapSearchProps) { |
||||
const { |
||||
roadmapTopic, |
||||
setRoadmapTopic, |
||||
handleSubmit, |
||||
limit = 0, |
||||
limitUsed = 0, |
||||
} = props; |
||||
|
||||
const canGenerateMore = limitUsed < limit; |
||||
|
||||
return ( |
||||
<div className="flex flex-grow flex-col items-center justify-center px-4 py-6 sm:px-6"> |
||||
<div className="flex flex-col gap-0 text-center sm:gap-2"> |
||||
<h1 className="relative text-2xl font-medium sm:text-3xl"> |
||||
<span className="hidden sm:inline">Generate roadmaps with AI</span> |
||||
<span className="inline sm:hidden">AI Roadmap Generator</span> |
||||
</h1> |
||||
<p className="text-base text-gray-500 sm:text-lg"> |
||||
<span className="hidden sm:inline"> |
||||
Enter a topic and let the AI generate a roadmap for you |
||||
</span> |
||||
<span className="inline sm:hidden"> |
||||
Enter a topic to generate a roadmap |
||||
</span> |
||||
</p> |
||||
</div> |
||||
<form |
||||
onSubmit={(e) => { |
||||
if (limit > 0 && canGenerateMore) { |
||||
handleSubmit(e); |
||||
} else { |
||||
e.preventDefault(); |
||||
} |
||||
}} |
||||
className="my-3 flex w-full max-w-[600px] flex-col gap-2 sm:my-5 sm:flex-row" |
||||
> |
||||
<input |
||||
autoFocus |
||||
type="text" |
||||
placeholder="e.g. Ansible" |
||||
className="w-full rounded-md border border-gray-400 px-3 py-2.5 transition-colors focus:border-black focus:outline-none" |
||||
value={roadmapTopic} |
||||
onInput={(e) => setRoadmapTopic((e.target as HTMLInputElement).value)} |
||||
/> |
||||
<button |
||||
className={cn( |
||||
'flex min-w-[143px] flex-shrink-0 items-center justify-center gap-2 rounded-md bg-black px-4 py-2 text-white', |
||||
{ |
||||
'cursor-not-allowed opacity-50': |
||||
!limit || !roadmapTopic || limitUsed >= limit, |
||||
}, |
||||
)} |
||||
> |
||||
{limit > 0 && canGenerateMore && ( |
||||
<> |
||||
<Wand size={20} /> |
||||
Generate |
||||
</> |
||||
)} |
||||
|
||||
{limit === 0 && ( |
||||
<> |
||||
<span>Please wait..</span> |
||||
</> |
||||
)} |
||||
|
||||
{limit > 0 && !canGenerateMore && ( |
||||
<span className="flex items-center text-base sm:text-sm"> |
||||
<Ban size={15} className="mr-2" /> |
||||
Limit reached |
||||
</span> |
||||
)} |
||||
</button> |
||||
</form> |
||||
<div className="mb-36"> |
||||
<p className="text-gray-500"> |
||||
<span className="inline sm:hidden">Generated </span> |
||||
<span className="hidden sm:inline">You have generated </span> |
||||
<span |
||||
className={cn( |
||||
'inline-block w-[65px] rounded-md border px-0.5 text-center text-sm tabular-nums text-gray-800', |
||||
{ |
||||
'animate-pulse border-zinc-300 bg-zinc-300 text-zinc-300': |
||||
!limit, |
||||
}, |
||||
)} |
||||
> |
||||
{limitUsed} of {limit} |
||||
</span>{' '} |
||||
roadmaps. |
||||
{!isLoggedIn && ( |
||||
<> |
||||
{' '} |
||||
<button |
||||
className="font-semibold text-black underline underline-offset-2" |
||||
onClick={showLoginPopup} |
||||
> |
||||
Log in to increase your limit |
||||
</button> |
||||
</> |
||||
)} |
||||
</p> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,43 @@ |
||||
const NEW_LINE = '\n'.charCodeAt(0); |
||||
|
||||
export async function readAIRoadmapStream( |
||||
reader: ReadableStreamDefaultReader<Uint8Array>, |
||||
{ |
||||
onStream, |
||||
onStreamEnd, |
||||
}: { |
||||
onStream?: (roadmap: string) => void; |
||||
onStreamEnd?: (roadmap: string) => void; |
||||
}, |
||||
) { |
||||
const decoder = new TextDecoder('utf-8'); |
||||
let result = ''; |
||||
|
||||
while (true) { |
||||
const { value, done } = await reader.read(); |
||||
if (done) { |
||||
break; |
||||
} |
||||
|
||||
// We will call the renderRoadmap callback whenever we encounter
|
||||
// a new line with the result until the new line
|
||||
// otherwise, we will keep appending the result to the previous result
|
||||
if (value) { |
||||
let start = 0; |
||||
for (let i = 0; i < value.length; i++) { |
||||
if (value[i] === NEW_LINE) { |
||||
result += decoder.decode(value.slice(start, i + 1)); |
||||
onStream?.(result); |
||||
start = i + 1; |
||||
} |
||||
} |
||||
if (start < value.length) { |
||||
result += decoder.decode(value.slice(start)); |
||||
} |
||||
} |
||||
} |
||||
|
||||
onStream?.(result); |
||||
onStreamEnd?.(result); |
||||
reader.releaseLock(); |
||||
} |
||||
@ -0,0 +1,10 @@ |
||||
--- |
||||
import LoginPopup from '../../components/AuthenticationFlow/LoginPopup.astro'; |
||||
import { GenerateRoadmap } from '../../components/GenerateRoadmap/GenerateRoadmap'; |
||||
import AccountLayout from '../../layouts/AccountLayout.astro'; |
||||
--- |
||||
|
||||
<AccountLayout title='Roadmap AI'> |
||||
<GenerateRoadmap client:load /> |
||||
<LoginPopup /> |
||||
</AccountLayout> |
||||
Loading…
Reference in new issue