6 |
7 | React app that lets you generate llama.cpp-compatible grammar files from simple TypeScript interfaces.
8 |
9 | * Uses [@intrinsicai/gbnfgen](https://github.com/intrinsiclabsai/gbnfgen/) under the hood for compilation from
10 | TypeScript to grammars
11 | * Built on top of [Vite](vitejs.dev) and [tailwindcss](https://tailwindcss.com/).
12 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
86 |
105 | );
106 | }
107 |
108 | return (
109 |
87 | 
92 |
96 | 93 | Grammar Builder 94 |
95 |
97 |
103 |
104 |
110 | {menuBar()}
111 |
121 | );
122 | }
123 |
--------------------------------------------------------------------------------
/src/assets/build.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IntrinsicLabsAI/grammar-builder/519c5883158dde1d6160dffb33ff84bd6c753a75/src/assets/build.png
--------------------------------------------------------------------------------
/src/assets/builder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IntrinsicLabsAI/grammar-builder/519c5883158dde1d6160dffb33ff84bd6c753a75/src/assets/builder.png
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/CodeEditor.tsx:
--------------------------------------------------------------------------------
1 | import CodeMirror from '@uiw/react-codemirror';
2 | import { javascript } from '@codemirror/lang-javascript';
3 | import { nordInit } from '@uiw/codemirror-theme-nord';
4 |
5 | const theme = nordInit({
6 | settings: {
7 | selection: "#4833b0",
8 | }
9 | });
10 |
11 |
12 | export default function CodeEditor(
13 | {
14 | value,
15 | setValue
16 | } : {
17 | value: string,
18 | setValue: (value: string) => void
19 | }
20 | ) {
21 | return (
22 |
113 |
120 |
114 |
116 |
117 |
119 |
23 | setValue(value)}/>
40 |
41 | )
42 | }
--------------------------------------------------------------------------------
/src/components/GrammarViewer.tsx:
--------------------------------------------------------------------------------
1 | import CodeMirror from '@uiw/react-codemirror';
2 | import { nord } from '@uiw/codemirror-theme-nord';
3 | import { CloudArrowDownIcon, ClipboardIcon } from '@heroicons/react/24/outline';
4 |
5 | export default function GrammarViewer(
6 | {
7 | value
8 | } : {
9 | value: string
10 | }
11 | ) {
12 | const generateFile = () => {
13 | const file = new File([value], 'grammar.gbnf', {
14 | type: 'text/plain',
15 | })
16 |
17 | const link = document.createElement('a')
18 | const url = URL.createObjectURL(file)
19 | link.href = url
20 | link.download = file.name
21 | document.body.appendChild(link)
22 | link.click()
23 | document.body.removeChild(link)
24 | window.URL.revokeObjectURL(url)
25 | }
26 |
27 | return (
28 |
24 |
28 | 25 | Type Definitions 26 |
27 |
29 |
33 | 30 | Define desired output types using Typescript. 31 |
32 |
29 |
56 | )
57 | }
--------------------------------------------------------------------------------
/src/components/WelcomeDialog.tsx:
--------------------------------------------------------------------------------
1 | import { Fragment } from "react";
2 | import { Dialog, Transition } from "@headlessui/react";
3 | import { CpuChipIcon, LanguageIcon, CodeBracketIcon } from "@heroicons/react/24/outline";
4 |
5 | export default function WelcomeDialog({
6 | open,
7 | setOpen,
8 | }: {
9 | open: boolean;
10 | setOpen: (isOpen: boolean) => void;
11 | }) {
12 | return (
13 |
30 |
44 | 31 | Generated Grammar 32 |
33 |
34 |
38 |
42 |
43 |
45 |
49 | 46 | This grammar can be used during LLMs generation. 47 |
48 |