ChatGPT-4o with canvas : Your Thoughts and Experience

That’s canvas

4 Likes

I have been using canvas for writing longer stories and coding.
Feedback from writing stories:
I often ran into the situation that I wanted to continue extensively inside a canvas (by marking somethings inside it and then prompt), but it would open a new canvas, which became frustrating as you can’t delete them and from my experience ChatGPT seems to think you always want to work upon the newest canvas. I even got into a loop with that where ChatGPT would always open a new canvas, no matter what I prompted. At some points ChatGPT would also continue outside of the Canvas. I also had the case where in an attempt to continue, ChatGPT would replace the entire canvas with the continuation of what was written in there, which was not helpful.
And when telling ChatGPT to continue extensively inside a canvas, it just does not do that.

  • Stop ChatGPT from opening new canvases if not told to.
  • You should really be able to delete Canvases.
  • It needs to be easier/more reliable to tell ChatGPT where to continue and how extensive.
  • When typing into a canvas, deleting text or replacing it all together, Chat GPT does not always seem to understand that there is new/changed text.
  • I love how you can edit things inside a Canvas. However, an additional and save to use continue function might be something you should think about.

Feedback from Coding:
Seriously, this is great! I had no larger problems. Sometimes he also here would open a new Canvas where it should not have but that happend only once. I created one canvas per python and html file which seemed most natural for me and ChatGPT was also able to understand links between Canvases, but it was not able to edit two Canvases at the same time, which could come in handy for coding. However we’d need to be able to see both Canvases open simultaneously for that case. Also it would be great if changed lines stay highlighted for a while, as sometimes ChatGPT edits something without scrolling there and then you’d ask your self what it edited and how exactly. This also is not always 100% clear from the comment in the prompt window.

  • Stop ChatGPT from opening new canvases if not told to.
  • Enable editing and opening two (or more) Canvases at the same time
  • Highlight changed code.
5 Likes

Here is an 8 prompt process in canvas for a very simple p5.js game (And the resulting game) copy and paste to https://editor.p5js.org

Requests:

make a story mode rpg game in p5.js canvas

create the forest

only create everything in code, not file maps

expand the world size

add the magical herb

create an inventory

make the quest complete when the player has herb and is talking to the quest giver

make the quest giver be outside of the dark forest

'''

'''
Code In P5.js:

let player;
let npc;
let dialogueBox;
let dialogueIndex = 0;
let dialogues = [
  "Hello, traveler!",
  "I have a quest for you.",
  "Head to the forest and find the magical herb.",
  "Thank you for bringing the herb! Quest complete!"
];
let forest;
let magicalHerb;
let worldWidth = 1600;
let worldHeight = 1200;
let inventory = [];
let questComplete = false;

function setup() {
  createCanvas(800, 600);
  player = new Player(50, 50);
  npc = new NPC(300, 200); // Place NPC outside of the forest
  dialogueBox = new DialogueBox();
  forest = new Forest();
  magicalHerb = new MagicalHerb(random(800, worldWidth), random(400, worldHeight)); // Place the herb deeper into the forest
}

function draw() {
  background(150, 200, 100); // Replace map image with a colored background to represent the map

  push();
  translate(width / 2 - player.x, height / 2 - player.y);

  forest.display();
  magicalHerb.display();
  player.move();
  player.display();
  npc.display();

  pop();

  // Check for interaction
  if (dist(player.x, player.y, npc.x, npc.y) < 50) {
    dialogueBox.display();
  }

  // Check if player found the magical herb
  if (dist(player.x, player.y, magicalHerb.x, magicalHerb.y) < 30 && !magicalHerb.collected) {
    fill(0);
    textSize(20);
    textAlign(CENTER, CENTER);
    text("You found the magical herb! Press 'E' to collect.", width / 2, height / 2);
  }

  // Display inventory
  displayInventory();
}

function keyPressed() {
  if (key === ' ') {
    // Interact with NPC
    if (dist(player.x, player.y, npc.x, npc.y) < 50) {
      if (inventory.includes("Magical Herb") && !questComplete) {
        dialogueIndex = 3; // Quest complete dialogue
        questComplete = true;
      } else {
        dialogueIndex++;
        if (dialogueIndex >= dialogues.length - 1 && !questComplete) {
          dialogueIndex = 0; // End of dialogues if quest not complete
        }
      }
    }
  }
  if (key === 'e' || key === 'E') {
    // Collect the magical herb
    if (dist(player.x, player.y, magicalHerb.x, magicalHerb.y) < 30 && !magicalHerb.collected) {
      inventory.push("Magical Herb");
      magicalHerb.collected = true;
    }
  }
}

function displayInventory() {
  fill(255);
  rect(10, 10, 200, 100);
  fill(0);
  textSize(16);
  textAlign(LEFT, TOP);
  text("Inventory:", 20, 20);
  for (let i = 0; i < inventory.length; i++) {
    text(`- ${inventory[i]}`, 20, 40 + i * 20);
  }
}

class Player {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 30;
  }

  move() {
    if (keyIsDown(LEFT_ARROW)) {
      this.x = max(0, this.x - 2);
    }
    if (keyIsDown(RIGHT_ARROW)) {
      this.x = min(worldWidth, this.x + 2);
    }
    if (keyIsDown(UP_ARROW)) {
      this.y = max(0, this.y - 2);
    }
    if (keyIsDown(DOWN_ARROW)) {
      this.y = min(worldHeight, this.y + 2);
    }
  }

  display() {
    fill(0, 0, 255);
    ellipse(this.x, this.y, this.size);
  }
}

class NPC {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 40;
  }

  display() {
    fill(255, 0, 0);
    ellipse(this.x, this.y, this.size);
  }
}

class DialogueBox {
  display() {
    fill(255);
    rect(50, height - 150, width - 100, 100);
    fill(0);
    textSize(20);
    textAlign(LEFT, TOP);
    text(dialogues[dialogueIndex], 70, height - 130);
  }
}

class Forest {
  constructor() {
    this.trees = [];
    for (let i = 0; i < 200; i++) {
      this.trees.push(new Tree(random(800, worldWidth), random(400, worldHeight))); // Trees are placed deeper in the forest
    }
  }

  display() {
    for (let tree of this.trees) {
      tree.display();
    }
  }
}

class Tree {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = random(40, 80);
  }

  display() {
    fill(34, 139, 34);
    ellipse(this.x, this.y, this.size);
  }
}

class MagicalHerb {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 20;
    this.collected = false;
  }

  display() {
    if (!this.collected) {
      fill(0, 255, 0);
      ellipse(this.x, this.y, this.size);
    }
  }
}
2 Likes

Is any one else being effectively forced into using (and only using) Canvas?

All my other options have disappeared!

My thoughts are that:

  • For code generation (I’ve been doing lots and lots of that, mostly for basic Python GUIs) this is a nice feature!
  • It’s quite buggy. Given that I seem to have now way *not * to use it currently I’m having to do some non-code-generation prompting with Canvas today. I asked GPT (for the first time!) to create an outline for a blog I want to write. It handled that as well as I expected. But when I asked for title suggestions, rather than simply give those back to me in chat, it annotated them as comments on the doc (I guess because it’s made the incorrect determination that I want to use this all the time now for everything!). Most of them weren’t “relevant” and a simple list of a few title ideas would have been much, much more helpful.

Overall, I think it’s a nice feature.

However, I think its utility will be in it being used very deliberately and carefully and it’s absolutely unreasonable to force it as the only option perhaps to accelerate the feedback process in its Beta (FWIW, I’m a Pro subscriber).

For code generation (develop this code, then help me debug) it makes much more sense to use Canvas.

For most other things, though, I’m finding it more of a nuisance than a value-add.

I find it frustrating you have to copy and paste html + javascript into a separate file and run it separately in a browser window?

After all the seamlessness of the early part of the workflow, this is really jarring.

Has anyone found a way to streamline that or do we need OpenAI to add some kind of even temp hosting for html files so they can be seamlessly spawned in a new tab and have that hosted page updated.

I have a few critical elements I think are important for production level use of the canvas feature to really make it useful and competitive.

  • You need to be able to tell it to ignore sections of text or stop repeating the same suggestions over and over.
  • Similarly giving the paragraph selection tool options to specifically request suggestions or comments if its too onerous to do so in a full 10k+ word document pass.
  • Dial in analysis of documents detail level since it tends to over emphasize or want fluff and padding in most of its suggestions.
  • Give tools to edit the formatting rules it wants to push in a more user friendly capacity. (Like taking MLA and selectively adding, editing, or removing them as something for it to draw resources from, I don’t know if this can be done on webui for chatgpt but certainly something to look at for local installations.)
  • Consider adding AI image generative support based on selected text.
  • Higher character/word count consideration and full pass of document when adding comments to entire document not just first 5 as seems to be the current limitation.

Overall I see this as a solid step in the right direction but I wonder if as a feature these things might get picked up by other AI projects, especially Google, and integrated into their document system. I could easily see a Writer specific module added to gdocs, accountant for sheets, etc for the use case specific interests. We do some of this type of specialization with image generation models already. Specialization then integrate them into the general use AI like GPT might be a route to get where we want it to be.

Can you imagine having a specialized module with the specific to your code base used refined with the feedback and improvement of everyone who uses it, then the general AI testing that same feedback across other similarly specialized modules and vice versa? That just seems a much more practical way to advance specific progress to me.

2 Likes

An idea I’m currently experimenting with, though I can’t say yet if it consistently works, would be interesting to test with the help of others.

I let GPT create a construction guide for a piece of code and insert it into a comment block at the very beginning. It contains everything the code is supposed to implement, with the instruction that this is GPT’s memory and that these instructions MUST always be used and updated during the error correction process.

The question then is whether GPT also destroys this construction list. One should save code from time to time locally in the process.

I find that GPT, in its current version, is not strong enough to really help efficiently with programming. The error correction cycles are simply too many, and there are too many bugs in the code development process, even for very simple and short codes. These try-and-error cycles are exactly what one wants to avoid with an LLM.

1 Like

Honestly sometimes gpt is like a dog with a stick too wide to get through the door. It keeps banging on the door, and doesn’t look at the problem from another angle - even when you ask it “can do it this way”?

2 Likes

This is a great enhancement for one of the primary use cases - creating structured written materials. With the old version I usually found myself wanting to correct sections of the output but reprompting wouldn’t work or be much slower than just quickly editing it myself. Now this is seamlessly integrated – well done!

Two feature requests that came from my very first session of “co-authoring” a learning module on a particular topic:

  1. “read aloud” option for the selected text section.
  2. a quickbutton that basically prompts “execute this prompt” over the selected text. I find myself asking it to inject new content sections. Currently I then write the prompt into the canvas, then select it and then again type “do this” or “execute this prompt” or similar. so a quickbutton for processing the selected text like a prompt would be awesome!

Thanks again for this great enhancement.

2 Likes

Been using it extensively but for multidocuments it’s very buggy.
System titles cant be changed, Files cannot be deleted archived.
Canvas files are made whenever it feels like it, even when asking not to.
Putting them in lockdown/readonly helps constant creation and editing without any reason, but also not watertight. Versioning is nice, but edit comparisons are missing, adjustments after creation is practically impossible, it loops immediatly after inline edit requests, and inchat less, but most of the time, clear the whole canvas, say your cleared it totally and start from scratchs works, but surely surpasses the concept.
Also in canvas session you need to constantly ask to not create canvas files after any question or suggestion. You also need to be able to turn updates of specific and/or all canvasses OFF and incl. creation of new canvasses.
At some points, it just started duplicating existing canvasses, from the chat just in conversations, And beware if you have an open canvas window, your chat is not available to do anything else than create new ones of failing any inline changes.

Apart from that, the fact i cant even get a single download anymore generated, let alone a zip file, even if it can and seldom is able to zip.
I’m currently only able to use 4o and 4o canvas, accepting the only extraction method of md and json is by forcing it to use a code window and copy manually.
Am I the only one here pushing and testing this intense or am i doing something wrong? Very interested in other peoples experience the last few days with canvas and 4o.

It is still very immature. And it needs a special trained LLM for coding, not the universal ChatGPT.
It helped me a bit, but in the same time it is a source for frustration.

1 Like