Skip to content

155 game of life llm feedback #159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
voodoohop merged 7 commits into from
Jan 30, 2025
Merged

155 game of life llm feedback #159

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6659e9b
Update index.html
voodoohop Jan 29, 2025
864ade9
Update seed value and improve prompt handling
voodoohop Jan 29, 2025
ff873cc
Add state block styling and iteration labels
voodoohop Jan 29, 2025
d3b7b9c
Merge branch 'main' into 155-game-of-life-llm-feedback
voodoohop Jan 29, 2025
1987858
Add missing line break for code clarity
voodoohop Jan 29, 2025
0e9d24e
Improve text processing and logging
voodoohop Jan 29, 2025
31db408
Merge branch 'main' into 155-game-of-life-llm-feedback
voodoohop Jan 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 15 additions & 12 deletions llm-feedback/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,21 +288,23 @@ <h2>History</h2>
// '.'.repeat(40);
}

function extractDisplayContent(text) {

// Then check for content before </think>
function removeThink(text) {
Copy link
Contributor

@mentatbot mentatbot bot Jan 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good refactoring to separate this into its own function. One suggestion would be to also handle the opening tag to be more robust - in case there's content after the closing tag. Something like:

const thinkPattern = /<think>[\s\S]*?<\/think>/;
return text.replace(thinkPattern, '').trim();

Copy link
Contributor

@devloai devloai bot Jan 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good refactoring to extract removeThink into a separate function for better code organization and reusability. However, consider adding input validation to handle cases where text might be undefined or null.

Copy link
Contributor

@mentatbot mentatbot bot Jan 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding input validation and error handling:

function removeThink(text) {
    if (!text) return '';
    try {
        const thinkMatch = text.split('</think>');
        if (thinkMatch.length > 1) 
            return thinkMatch[1].trim();
        return text;
    } catch (error) {
        console.error('Error processing think tags:', error);
        return text;
    }
}

// Check for content before </think>
const thinkMatch = text.split('</think>');
if (thinkMatch.length > 1)
text = thinkMatch[1].trim();
return thinkMatch[1].trim();
return text;
}

function extractDisplayContent(text) {
text = removeThink(text);

// First try to extract content from code blocks
// Extract content from code blocks
const codeMatch = text.match(/```([\s\S]*?)```/);
if (codeMatch)
return codeMatch[1];


// If neither pattern matches, return the original text
// If no code blocks, return the cleaned text
return text;
}

Expand All @@ -320,18 +322,18 @@ <h2>History</h2>

async function generateText(prompt, currentState) {
const formatInstructions = `- You create an output state from an input state according to the prompt. It will be visualized in a 30x15 grid.
- Output exactly 15 lines, each exactly 30 characters wide
- You may output explanations but wrap the next state in triple backticks \`\`\` so we can parse it for display
- If there is an input state, transform it gradually according to the prompt.
- If there is no input state, use the prompt to come up with a starting state. Be creative
- Maintain consistent style and theme
- Before outputting anything spend some time thinking between <think> </think> tags. Please think step by step maybe decomposing the job.
Copy link
Contributor

@mentatbot mentatbot bot Jan 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice addition to the format instructions. This should help get more structured and thoughtful responses from the model.

Copy link
Contributor

@devloai devloai bot Jan 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new thinking instruction is a good addition for better LLM responses. However, consider adding an example of the <think> tag usage in the instructions to make it clearer for the LLM. For example:

Example:
<think>
1. First, I'll analyze the current state
2. Then, I'll apply the transformation rules
3. Finally, I'll format the output
</think>

Copy link
Contributor

@mentatbot mentatbot bot Jan 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding an example in the instructions to make it clearer for the LLM:

Example:
<think>
1. First, I'll analyze the current state
2. Then, I'll apply the transformation rules
3. Finally, I'll format the output
</think>

This will help ensure consistent and well-structured responses.


Prompt:
${prompt}`;

try {
console.log('Prompt:', prompt);
console.log('System instructions:', formatInstructions);
// console.log('Prompt:', prompt);
// console.log('System instructions:', formatInstructions);

elements.start.textContent = 'Generating...';

Expand All @@ -343,7 +345,7 @@ <h2>History</h2>
const messages = model === 'deepseek-r1' ?
[{
role: "user",
content: formatInstructions + "\n\n# Current State\n\n" + currentState
content: formatInstructions + "\n\n# Current State\n\n" + removeThink(currentState)
}] :
[{
role: "system",
Expand All @@ -354,7 +356,8 @@ <h2>History</h2>
content: currentState
}];



console.log('Generating text... for message:', JSON.stringify(messages, null, 2));
Copy link
Contributor

@mentatbot mentatbot bot Jan 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good addition for debugging, but consider wrapping this in a debug flag or environment variable since it could log sensitive prompt data in production.

Copy link
Contributor

@mentatbot mentatbot bot Jan 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add error handling and user feedback:

try {
    console.log('Generating text... for message:', JSON.stringify(messages, null, 2));
    const response = await fetch('https://text.pollinations.ai/', {
        // ... existing config
    });
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    // ... process response
} catch (error) {
    console.error('Text generation failed:', error);
    elements.start.textContent = 'Failed to generate text. Please try again.';
    throw error;
}

const response = await fetch('https://text.pollinations.ai/', {
Copy link
Contributor

@devloai devloai bot Jan 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding more specific error handling around the API call. While you're logging the messages for debugging, it would be helpful to display user-friendly error messages in the UI when text generation fails. This would improve the user experience.

method: 'POST',
headers: {
Expand Down
Loading