groq.ts•4.79 kB
import Groq from "groq-sdk";
import { WebsiteGenerator, WebsiteComponents, LLMConfig } from "../types.js";
export class GroqWebsiteGenerator implements WebsiteGenerator {
private client: Groq;
private config: LLMConfig;
constructor(config?: LLMConfig) {
this.config = {
model: "llama-3.3-70b-versatile",
maxTokens: 4000,
temperature: 0.7,
...config
};
// Initialize Groq client with API key from environment or config
const apiKey = config?.apiKey || process.env.GROQ_API_KEY;
if (!apiKey) {
throw new Error("GROQ_API_KEY environment variable is required");
}
this.client = new Groq({
apiKey: apiKey
});
}
getAvailableModels(): string[] {
return [
"llama-3.3-70b-versatile",
"llama-3.1-70b-versatile",
"llama-3.1-8b-instant",
"mixtral-8x7b-32768",
"gemma2-9b-it"
];
}
private async generateWithGroq(prompt: string, model?: string): Promise<string> {
try {
const response = await this.client.chat.completions.create({
messages: [
{
role: "user",
content: prompt
}
],
model: model || this.config.model || "llama-3.3-70b-versatile",
max_tokens: this.config.maxTokens,
temperature: this.config.temperature,
stream: false
});
return response.choices[0]?.message?.content || "";
} catch (error) {
throw new Error(`Groq API error: ${error instanceof Error ? error.message : String(error)}`);
}
}
async generateHTML(prompt: string, model?: string): Promise<string> {
const htmlPrompt = `Generate clean, semantic HTML5 code for the following request. Only return the HTML code without any explanations or markdown formatting:
${prompt}
Requirements:
- Use semantic HTML5 elements
- Include proper DOCTYPE and meta tags
- Make it responsive-ready
- Add appropriate accessibility attributes
- Only return the HTML code, no explanations`;
return this.generateWithGroq(htmlPrompt, model);
}
async generateCSS(prompt: string, model?: string): Promise<string> {
const cssPrompt = `Generate modern CSS code for the following styling request. Only return the CSS code without any explanations or markdown formatting:
${prompt}
Requirements:
- Use modern CSS features (flexbox, grid, custom properties)
- Make it responsive
- Include hover effects and transitions where appropriate
- Use a mobile-first approach
- Only return the CSS code, no explanations`;
return this.generateWithGroq(cssPrompt, model);
}
async generateJS(prompt: string, model?: string): Promise<string> {
const jsPrompt = `Generate clean, modern JavaScript code for the following functionality request. Only return the JavaScript code without any explanations or markdown formatting:
${prompt}
Requirements:
- Use modern ES6+ JavaScript
- Include proper error handling
- Add comments for complex logic
- Make it modular and reusable
- Follow best practices
- Only return the JavaScript code, no explanations`;
return this.generateWithGroq(jsPrompt, model);
}
async generateWebsite(prompt: string, includeJs: boolean = true, model?: string): Promise<string> {
// Generate HTML with placeholders
const htmlPrompt = `Generate a complete HTML5 webpage for: ${prompt}
Requirements:
- Complete HTML document with DOCTYPE, head, and body
- Include a <style> section placeholder: <style id="placeholder-css"></style>
- Include a <script> section placeholder: <script id="placeholder-js"></script>
- Make it responsive-ready
- Add proper meta tags and title
- Only return the HTML code, no explanations`;
let html = await this.generateWithGroq(htmlPrompt, model);
// Generate CSS
const cssPrompt = `Generate CSS styles for a webpage about: ${prompt}
Requirements:
- Modern, attractive styling
- Responsive design (mobile-first)
- Good color scheme and typography
- Smooth transitions and hover effects
- Professional appearance
- Only return the CSS code, no explanations`;
const css = await this.generateWithGroq(cssPrompt, model);
html = html.replace('<style id="placeholder-css"></style>', `<style>\n${css}\n</style>`);
if (includeJs) {
const jsPrompt = `Generate JavaScript functionality for a webpage about: ${prompt}
Requirements:
- Add interactive features
- Include smooth scrolling, animations, or form handling as appropriate
- Use modern ES6+ JavaScript
- Add event listeners and DOM manipulation
- Make it enhance the user experience
- Only return the JavaScript code, no explanations`;
const js = await this.generateWithGroq(jsPrompt, model);
html = html.replace('<script id="placeholder-js"></script>', `<script>\n${js}\n</script>`);
}
return html;
}
}