Building an AI Cron Builder with Cloudflare Pages and Next.js

app/
├── api/
│   └── cron/         # AI endpoint
├── components/       # React components
├── layout.tsx       # Root layout
└── page.tsx         # Main page

export const runtime = 'edge'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center px-12 bg-[#FAFDFF]">
      <header className="w-full h-16">
        <nav className="w-full h-full">
          <ul className="flex list-none h-full items-center justify-between">
            <li className="flex self-center items-center">
              <Image alt="logo" className="w-10 h-10 mr-2" width={100} height={100} src={"/logo.png"} />
              <h1 className="text-lg font-bold text-[#44779C]">Cron Builder</h1>
            </li>
            <li>
              <a role="button" tabIndex={0} href="mailto:service@cronbuilder.online" className="px-2.5 py-1 bg-blue-400 font-bold text-base text-white rounded-md">
                Contact
              </a>
            </li>
          </ul>
        </nav>
      </header>
      <h1 className="text-clip bg-clip-text text-transparent bg-[length:200%_100%] bg-ai animate-ai-animate-btn font-bold text-5xl text-center mt-10 ">
          Build Your Perfect
          <br/>
          Cron Expression Effortlessly
      </h1>
      <section className="w-full mt-8 flex justify-center">
        {/* <h2>Generate your cron expression</h2> */}
        <CronComp />
      </section>
      <section>

      </section>
    </main>
  );
}

const CronComp = () => {
    const [value, setValue] = useState('* * * * *');
    const [error, setError] = useState<boolean>(false);
    const handleCatchError = (error: CronError) => {
        if(error) {
            setError(true)
        } else {
            setError(false)
        }
    }

    return <ConfigProvider
        theme={
            {
                token: {
                    borderRadius: 0
                }
            }
        }
    >
        <div className='flex flex-col min-w-full'>
            <div>
                <AiGen onGenerate={(string) => {
                    if(string) {
                        setValue(string)
                    }
                }} />
            </div>
            <div>
                <Cron onError={handleCatchError} locale={NO_PREFIX_SUFFIX_LOCALE} value={value} setValue={setValue} />
            </div>
            <div>
                <Input status={error ? 'error' : ''} onChange={(e) => setValue(e.target.value)} value={value} />
            </div>
        </div>
    </ConfigProvider>
}

const AiGen:FC<AiGenProps> = ({onGenerate}) => {

    const [prompt, setPrompt] = useState<string>();
    const [loading, setLoading] = useState<boolean>(false);

    const btnClick = () => {
        if(loading) {
            return
        }
        setLoading(true);
        fetch('/api/cron', {
            method: 'POST',
            headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ prompt}),
        }).then(res => res.json()).then((res: any) => {
            onGenerate(res.response);
        }).finally(() => {
            setLoading(false);
        })
    }

    return <div className="flex flex-col">
        <Input.TextArea style={{resize: 'none'}} className='resize-none' placeholder="please input your prompt to generate the cron expression" onChange={(e) => setPrompt(e.target.value)} value={prompt} rows={4} />
        <button className={`${loading ? "cursor-wait" : ""} bg-[length:200%_100%] hover:animate-ai-animate-btn px-4 py-1 flex justify-center items-center mt-4 mb-4 self-end bg-ai text-white rounded-md`  }onClick={btnClick}>
            <span className='mr-2'>Run</span>
            <Image alt='image' width={10} height={10} src={"/magic.svg"} />
        </button>
    </div>
}

export async function POST(request: NextRequest) {
  // let responseText = 'Hello World'

  const { prompt } = await request.json<any>();
  const input = { prompt: `
      role: you are a cron expression master;
      capability: you can give valid cron expression by user nature language input;
      examples:
      Q: every minute invoke cron expression
      A: * * * * *

      Q: every hour at 30 minutes cron expression
      A: 30 * * * *

      Q: once a day cron expression
      A: 0 0 * * *

      Q: once a month
      A: 0 0 1 * *

      limit:
      1. no "?" or "#"  non-standard character.
      2. all cron expression only have 5 part(eg * * * * *).

      rule: 
      1. don't give me expression detail just give me result.
      2. the result must be a valid cron expression. 
      3. no extra useless string, just a cron expression (very important).

      now please generate cron by user input "${prompt}", if you can't give valid cron expression just told me "please try again"
    `};

  //@ts-ignore
  const answer = await getRequestContext().env.AI.run(
    "@cf/meta/llama-3-8b-instruct",
    input,
  );

  return new Response(JSON.stringify(answer))
}

const input = {
  prompt: `
    role: you are a cron expression master;
    capability: you can give valid cron expression by user nature language input;
    examples: [...]
    limit: [...]
    rule: [...]
  `
}

   Build command: npm run build
   Build output directory: .next