ChatGPT-4o with canvas : Your Thoughts and Experience

ChatGPT
,
91

I love this direction because 90% of my use of ChatGPT is with coding. Here is my feedback:

  1. I think it would be a huge improvement if I could better organize my coding project by have a single pane for the overall project name and then sub panes for each source file in the project and the ability to rename those sub panes by the file name of the source code. Maybe something that emulates how visual studio or any other development IDE manages a coding project. In it’s current state, it tends to dump all generated code into a single pane when the requested coding feature would apply to changing multiple files in a project.

  2. Add C# as one of the conversion languages in the sidebar conversion menu. The C# community is very large. But this one is not a huge deal, since you can just ask for a C# conversion explicitly.

  3. I really love how this is working so far when dealing with a single source file in a pane. The modified code is placed where it needs to be and I can simply copy and paste the entire output right back into my source file without needing to figure out where to copy and paste several snippets of code.

  4. Bug fixes. As expected, a beta version will have bugs lol. I had a lot of problems renaming panes. I was attempting to organize my canvas coding project by having a single pane for each source file of my project. Also, canvas was not able to recognize that each pane was a separate file and would constantly overwrite source code of a file to the wrong pane. I was constantly copying and pasting the correct code to the correct pane that represented the file I was working with. I also experienced a lot of generic errors that said something along the lines of “requested action failed”. Sorry I don’t have specifics for you. I trust that you guys are likely logging those errors and will work through them. These are the only issues that are preventing me from continuing to use the beta version. I’m looking forward to either an improved beta version or a released version. Keep up the great work!! This is going to be a game changer for developers.

2 Likes
92

Experience Report

Cannot rename or delete documents once created

In a conversation in 4o w/ Canvas Beta prompted as an agent to discuss and maintain some living documents together over time, it came to mis-title a document, which I tried instructing it to rename. It said it was renaming the document, but what it did was clone it into a renamed clone. When I explained to it that we now had the original mis-titled document and now a clone of it with a better title, it deleted the content of the original document (still leaving the empty document in the drop down directory of documents). When I pointed this out, it apologized and then deleted the content of the other copy, leaving that document empty but still in the document list. When this was reported, it created yet a second clone (three documents in total now), firmly establishing its utter inability to rename or delete a document.

User wish

That Canvas can understand and carry out rename and delete operations. Perhaps it could be instructed to validate deletes or renames since they are admittedly sensitive operations that could trash important content or have to deal with name uniqueness.

Additional Note

I realize that this seems to be marketed as a solution for coding which I undertand it is, but whether one is creating a library of code documents or library of documents for any purpose, the ability to rename and delete documents seems an important skill. I will end up going back to using a custom GPT, which unfortunately cannot operate with Canvas functions, but which we will share some Notion document links whose content I will manage myself (the horror).

Canvas Dev Team: this is such an important feature, and I am sure some day you will probably be allowing it to create repository of documents (with folder structure and everything) and maybe even letting you sync it to a github repository. I for one am dying for this feature, and think that the future of agents and their customers sharing and referring to a common document library is an incredibly powerful feature. Best wishe to you and I only wish I could help.

3 Likes
93

Does anyone have the issue with chats not loading either old canvas, or current one? The chat window itself is responsive, answers, and will create new canvas windows (although they don’t open either).

But older chats, especially ones with lots of canvas’s, are currently failing to load. Basically, you open the chat and the title, plus around 20 loading bars are shown.

I have a horrible feeling I’ve just lost two weeks of work, I was attempting to use Canvas for everything to see how effective it was. Why didn’t I back it up… because I’m an idiot.

*Update it seems other windows with 5 or 6 Canvas’s open with a delay, so perhaps it is a server issue due to load…fingers crossed.

1 Like
95

Hi, unfortunately I still don’t see mathematical formulas rendered inside the canvas. Can the developers please fix this?

1 Like
96

Just a word to the wise, my issue seems to be server side, without additional information it is likely the server ‘lost’ the contents of the canvas windows. And since it is stored separately, unlike previously when chats broke, or stopped working, you will lose it completely.

So, I can’t recommend this to authors looking to write their novel online, as unlike some of the online writing services, you can’t really trust it to hold your data. So back to offline and using the service to edit rather than create for me (and backups, lots of backups).

As an additional, I also noticed it sometimes does not save changes, after writing a chapter, making sure it had finished saving the work, I closed down to find all my work missing the next day.

While there is a chance for them to find and fix the issue, I doubt I will see that work again.

Coding wise, I imagine it is much the same issue. I used to use just Notepad 2++ but that was…probably decades ago now. So not sure what people use these days.

1 Like
97

Was it a ‘long’ document that you lost? I’ve been working on a large document for the last 3-4 weeks, thankfully taking a copy at the end of each day after the hour-long outage last week. Sat down this morning to do a final read through, and it wouldn’t load.

Finally got it to load after closing and re-opening chrome five times, and went to do an edit, and it gave me an error saying the document was too large for canvas and wouldn’t let me edit. Pasted the markdown copy I had externally into the chat and asked chatgpt to put it into the canvas, and it got about 1/10th of the way through and then stopped and said it had hit the character limit.

So you MAY be able to get access to your document by just closing and re-opening the tab a bunch of times.

1 Like
98

It was a mix, but it was every single canvas in the particular chats. Probably the first chat that broke, I’m not sure because I hadn’t used this chat for weeks, the canvases were all quite short.

The second, was also short but had quite a few canvases. The third was about a novel worth, spread over approximately 20 canvases, some of the canvases were short, some longer.

My forth just went the same way, a few longer canvases. There doesn’t seem to be a fix unfortunately, the file that related to the canvases can’t be found on the server. In every case.

1 Like
99

Truncating is the the single biggest issue that I have with the current implementation of Canvas. This is exacerbated when using docstrings.

4 Likes
100

I’m liking it - feels like an upgrade came along in the middle of my first project. Things are proceeding at a faster pace now. Using it for Javascript code and some light html/css.

I don’t know much about the Playground and how it works, or any Chatgpt tricks yet, but I’ve already built a UI that’s getting Whisper responses and writing the text to the screen.

For a basic coder it’s been a really cool pipeline to develop for my own workflow.

2 Likes
101

Super important to Ease of Use. :boom:

1 Like
102

The inability to directly manage the canvas files such as deleting and renaming, and the truncating files when they get to a certain length are the only two things preventing me from using this long term.

2 Likes
103

Not being able to rename or delete a canvas is pretty annoying for sure. The truncating is what really prevents me from actually enjoying this tool, not too mention when it starts to slow down and hallucinate and not taking the code or text in the other canvases into account.

One would think that the canvas model, when being used, would be stored inside of a Redis database that the LLM could reference when making changes. When not being used, it would then send the chat and canvas(es) into a MongoDB collection (collection being the chat, a document for the request/responses, and a document for each canvas created within the chat).

But hey, I’m not an architecture engineer, so what do I know, right?

1 Like
104

A recommendation for both GPT with canvas and for other models was the fact that we had the ability to generate a navigation panel, generated from markers that the user could indicate. Since when the chat is too long, it becomes very difficult to find a specific point.

1 Like
105

I can barely get ChatGPT to use the Canvas, and when it does it’s just wrong. Always wrong. It’s unbelievable how dumb 4o is. Might as well be using 3.5

1 Like
106

20 Minutes on Canvas modelling a ‘Soft Body’ AI adjusting it’s form and effort to balance entropy.

The Love Bug
Love Bug

Love Bug HTML Code Using P5.JS 
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js"></script>
    <meta charset="utf-8" />
<style>
html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}
</style>
  </head>
  <body>
    <main>
    </main>
    <script>

// Declare variables for the physics calculations
let centerX = 0.0;
let centerY = 0.0;
let radius = 45;
let rotAngle = -90;
let accelX = 0.0;
let accelY = 0.0;
let deltaX = 0.0;
let deltaY = 0.0;
let springing = 0.001; // Reduced springing for less stiffness
let damping = 0.975; // Slightly increased damping for smoother motion

// Declare variables for specifying vertex locations
let nodes = 5;
let nodeStartX = [];
let nodeStartY = [];
let nodeX = [];
let nodeY = [];
let angle = [];
let frequency = [];

// Declare the variable for the curve tightness
let organicConstant = 1.0;

// Declare variables for obstacles
let obstacles = [];

// Player variables
let playerX = 0;
let playerY = 0;
let playerSpeed = 5;

// Sparks
let sparks = [];

function setup() {
  createCanvas(windowWidth, windowHeight);

  // Start in the center of the canvas
  centerX = width / 2;
  centerY = height / 2;
  playerX = width / 2;
  playerY = height / 2;

  // Initialize arrays to 0
  for (let i = 0; i < nodes; i++) {
    nodeStartX[i] = 0;
    nodeStartY[i] = 0;
    nodeX[i] = 0;
    nodeY[i] = 0;
    angle[i] = 0;
  }

  // Initialize frequencies for corner nodes
  for (let i = 0; i < nodes; i++) {
    frequency[i] = random(5, 12);
  }

  // Add obstacles to the canvas
  for (let i = 0; i < 50; i++) {
    obstacles.push({
      x: random(-500, 500),
      y: random(-500, 500),
      r: random(20, 40),
    });
  }

  noStroke();
  angleMode(DEGREES);
}

function draw() {
  background(0);

  // Update player position
  updatePlayer();

  // Draw obstacles
  drawObstacles();

  // Draw player
  fill(0, 255, 0);
  ellipse(width / 2, height / 2, 20);

  // Draw and move the shape
  drawShape();
  moveShape();
  
  // Update and draw sparks
  updateSparks();
  drawSparks();
}

function updatePlayer() {
  if (keyIsDown(87)) playerY -= playerSpeed; // W
  if (keyIsDown(83)) playerY += playerSpeed; // S
  if (keyIsDown(65)) playerX -= playerSpeed; // A
  if (keyIsDown(68)) playerX += playerSpeed; // D
}

function drawObstacles() {
  
  fill(139,146,98);
  for (let obs of obstacles) {
    ellipse(obs.x - playerX + width / 2, obs.y - playerY + height / 2, obs.r * 2);
  }
}

function drawShape() {
  // Calculate node starting locations
  for (let i = 0; i < nodes; i++) {
    nodeStartX[i] = centerX + cos(rotAngle) * radius;
    nodeStartY[i] = centerY + sin(rotAngle) * radius;
    rotAngle += 360.0 / nodes;
  }

  // Draw the polygon
  curveTightness(organicConstant);
  let shapeColor = lerpColor(color('blue'), color('red'), organicConstant);
  fill(shapeColor);

  beginShape();
  for (let i = 0; i < nodes; i++) {
    curveVertex(nodeX[i] - playerX + width / 2, nodeY[i] - playerY + height / 2);
  }
  endShape(CLOSE);
}

function moveShape() {
  // Move center point towards player
  deltaX = playerX - centerX;
  deltaY = playerY - centerY;

  // Create springing effect
  deltaX *= springing;
  deltaY *= springing;
  accelX += deltaX;
  accelY += deltaY;

  // Adjust center for obstacle collision
  for (let obs of obstacles) {
    let distToObstacle = dist(centerX, centerY, obs.x, obs.y);
    if (distToObstacle < radius + obs.r) {
      let overlap = radius + obs.r - distToObstacle;
      let repelX = (centerX - obs.x) / distToObstacle;
      let repelY = (centerY - obs.y) / distToObstacle;

      // Adjust position to resolve collision
      centerX += repelX * overlap * 0.5;
      centerY += repelY * overlap * 0.5;

      // Redirect velocity away from obstacle
      accelX += repelX * 0.1;
      accelY += repelY * 0.1;
    }
  }

  // Move center
  centerX += accelX;
  centerY += accelY;

  // Slow down springing
  accelX *= damping;
  accelY *= damping;

  // Change curve tightness based on the overall acceleration;
  // use abs() to avoid dependence on direction of acceleration
  organicConstant = 1 - (abs(accelX) + abs(accelY)) * 0.2;

  // Move nodes
  for (let i = 0; i < nodes; i++) {
    nodeX[i] = nodeStartX[i] + sin(angle[i]) * (accelX * 2);
    nodeY[i] = nodeStartY[i] + sin(angle[i]) * (accelY * 2);

    // Check collision with obstacles
    for (let obs of obstacles) {
      let distToObstacle = dist(nodeX[i], nodeY[i], obs.x, obs.y);
      if (distToObstacle < obs.r) {
        let overlap = obs.r - distToObstacle;
        let repelForceX = (nodeX[i] - obs.x) / distToObstacle;
        let repelForceY = (nodeY[i] - obs.y) / distToObstacle;

        // Adjust node position
        nodeX[i] += repelForceX * overlap * 0.5;
        nodeY[i] += repelForceY * overlap * 0.5;
        
        // Create sparks
        createSpark(nodeX[i], nodeY[i], repelForceX, repelForceY);
      }
    }

    angle[i] += frequency[i];
  }
}

function updateSparks() {
  for (let i = sparks.length - 1; i >= 0; i--) {
    let spark = sparks[i];
    spark.x += spark.dx;
    spark.y += spark.dy;
    spark.life--;

    // Remove dead sparks
    if (spark.life <= 0) sparks.splice(i, 1);
  }
}

function createSpark(x, y, dx, dy) {
  // Use the same color as the softbody shape for sparks
  let sparkColor = lerpColor(color('blue'), color('red'), organicConstant);

  for (let i = 0; i < 5; i++) {
    sparks.push({
      x: x,
      y: y,
      dx: dx * random(1, 3) + random(-1, 1),
      dy: dy * random(1, 3) + random(-1, 1),
      life: 30,
      color: sparkColor // Store the color for each spark
    });
  }
}

function drawSparks() {
  noStroke();
  for (let spark of sparks) {
    fill(spark.color); // Use the stored color for each spark
    ellipse(spark.x - playerX + width / 2, spark.y - playerY + height / 2, 4, 4);
  }
}
    </script>
  </body>
</html>
2 Likes
107 
from langchain_core.output_parsers import StrOutputParser
from langchain_core.prompts import PromptTemplate
from langchain.chat_models import ChatOpenAI
import openai
from langchain.prompts import ChatPromptTemplate
from operator import itemgetter
prompt_str="""
Answer the user question briefly.

Question: {question}
"""
prompt = ChatPromptTemplate.from_template(prompt_str)
question_fetcher=itemgetter("question")
llm = ChatOpenAI(model_name=llm_name, openai_api_key=openai.api_key, temperature=0)

chain = question_fetcher| prompt | llm | StrOutputParser()
query = "tell me about lahore"  # Question here
response = chain.invoke({"question": query})
print(response)

i have above chatbot code using openai llm ,i want to replace with gemni given below, generate a code with gemni

genai.configure(api_key="YOUR_API_KEY")
model = genai.GenerativeModel("gemini-1.5-flash")
response = model.generate_content("Explain how AI works")
print(response.text)
1 Like
108

If you add polygons you can do sphere shapes and do dynamic 3D entropic effects, like spikes etc, then do typographical coloring to see what projections are “hot “ red or cold “blue” have it as a spectrum of blue purple red. Gradient :rabbit:

1 Like
109

That sounds great. This was only a 20 minute play with canvas but we also included the code so you can edit for your own needs. :slight_smile:

2 Likes
110

I’m out of hearts for two hours I’ll be back. I did 3D stuff back in the day 3Dmax and mesh work. I was a seller in both IMVU and second life. I made a ton of original products. I used to do avatar art contests and everything in 5h3 image was a image of a 3D scene all items in the image made by me.

I became disabled at 35 so I have been online hustling since then.
52 now, Anna is the only one with a real job lol. I do RPG content, AI work , eBay and Amazon, forum groups . I have a decent sized following.

One of my smaller but favorite tabletop fan group I made and run . I have 32 difrent groups and forums that I own or am admin in … about 160k total audience. This group is onl6 6k but it is my favorite.

2 Likes
111

I lost about half my following of 320k when I started AI work lol…
So I am all in lol…
:rabbit::heart:
Some of my best friends called me “evil” I work with a lot of creatives. Artists, writers etc.
Sadly they would love canvas but refuse to engage
But in the past I knew folks who thought computers were a “fad” so it will all work out…

2 Likes