25 ta’ Marzu 2025

Introduzzjoni għal Ġenerazzjoni tal-Immaġnijiet 4o

Niftħu l-bieb għal ġenerazzjoni ta’ immaġnijiet utli u ta’ valur b’mudell multimodali nattiv kapaċi jagħti outputs preċiżi, eżatti u fotorealistiċi.

Ipprova f’ChatGPT

This post introduced 4o image generation.

For the current image experience:

ChatGPT Images 2.5

Create images in ChatGPT

Qed jillowdja…

F’OpenAI, ilna nemmnu li l-ġenerazzjoni tal-immaġnijiet għandha tkun kapaċità primarja tal-mudelli tal-lingwa tagħna. Għalhekk bnejna l-aktar ġeneratur tal-immaġnijiet avvanzat tagħna s’issa ġewwa GPT‑4o. Ir-riżultat—ġenerazzjoni tal-immaġnijiet li mhijiex biss sabiħa, iżda utli.

A wide image taken with a phone of a glass whiteboard, in a room overlooking the Bay Bridge. The field of view shows a woman writing, sporting a tshirt wiith a large OpenAI logo. The handwriting looks natural and a bit messy, and we see the photographer's reflection.

The text reads:

(left)
"Transfer between Modalities:

Suppose we directly model
p(text, pixels, sound) [equation]
with one big autoregressive transformer.

Pros:
* image generation augmented with vast world knowledge
* next-level text rendering
* native in-context learning
* unified post-training stack

Cons:
* varying bit-rate across modalities
* compute not adaptive"

(Right)
"Fixes:
* model compressed representations
* compose autoregressive prior with a powerful decoder"

On the bottom right of the board, she draws a diagram:
"tokens -> [transformer] -> [diffusion] -> pixels"

^{Best of 8}

selfie view of the photographer, as she turns around to high five him

^{Best of 8}

Ġenerazzjoni ta’ immaġnijiet utli

Mill-ewwel pitturi tal-għerien sal-infografiċi moderni, il-bnedmin użaw xbihat viżwali biex jikkomunikaw, jipperswadu u janalizzaw—mhux biss biex iżejnu. Il-mudelli ġenerattivi tal-lum jistgħu joħolqu xeni surreali u tal-għaġeb, iżda jsibu diffikultà bix-xbihat prattiċi li n-nies jużaw biex jaqsmu u joħolqu l-informazzjoni. Mil-logos sad-dijagrammi, l-immaġnijiet jistgħu jwasslu tifsira preċiża meta jiġu msaħħa b’simboli li jirreferu għal lingwa u esperjenza komuni.

Il-ġenerazzjoni tal-immaġnijiet GPT‑4o tispikka fir-rendering eżatt tat-test, fis-segwitu preċiż tal-prompts, u fl-użu tal-bażi ta’ għarfien inerenti ta’ 4o u tal-kuntest taċ-chat—inkluż it-trasformar ta’ immaġnijiet imtellgħin jew l-użu tagħhom bħala ispirazzjoni viżwali. Dawn il-kapaċitajiet jagħmluha aktar faċli li toħloq eżatt l-immaġni li timmaġina, jgħinuk tikkomunika b’mod aktar effettiv permezz tal-viżwali u javvanzaw il-ġenerazzjoni tal-immaġnijiet f’għodda prattika bi preċiżjoni u qawwa.

Kapaċitajiet imtejba

Ħarriġna l-mudelli tagħna fuq id-distribuzzjoni konġunta ta’ immaġnijiet u test online, u tgħallmu mhux biss kif l-immaġnijiet jirrelataw mal-lingwa, iżda kif jirrelataw ma’ xulxin. Flimkien ma’ post-training aggressiv, il-mudell li jirriżulta għandu fluwidità viżwali sorprendenti, kapaċi jiġġenera immaġnijiet li huma utli, konsistenti u konxji mill-kuntest.

Rendering tat-test

Stampa tiswa elf kelma, iżda xi drabi l-ġenerazzjoni ta’ ftit kliem fil-post it-tajjeb tista’ tgħolli t-tifsira ta’ immaġni. Il-kapaċità ta’ 4o li jgħaqqad simboli preċiżi ma’ xbihat tbiddel il-ġenerazzjoni tal-immaġnijiet f’għodda għall-komunikazzjoni viżwali.

Create a photorealistic image of two witches in their 20s (one ash balayage, one with long wavy auburn hair) reading a street sign.

Context:
a city street in a random street in Williamsburg, NY with a pole covered entirely by numerous detailed street signs (e.g., street sweeping hours, parking permits required, vehicle classifications, towing rules), including few ridiculous signs at the middle: (paraphrase it to make these legitimate street signs)"Broom Parking for Witches Not Permitted in Zone C" and "Magic Carpet Loading and Unloading Only (15-Minute Limit)" and "Reindeer Parking by Permit Only (Dec 24–25)
Violators will be placed on Naughty List." The signpost is on the right of a street. Do not repeat signs. Signs must be realistic.

Characters:
one witch is holding a broom and the other has a rolled-up magic carpet. They are in the foreground, back slightly turned towards the camera and head slightly tilted as they scrutinize the signs.

Composition from background to foreground:
streets + parked cars + buildings -> street sign -> witches. Characters must be closest to the camera taking the shot

^{Best of ~8}

Ġenerazzjoni b’diversi dawriet

Minħabba li l-ġenerazzjoni tal-immaġnijiet issa hija nattiva għal GPT‑4o, tista’ tirfina l-immaġnijiet permezz ta’ konversazzjoni naturali. GPT‑4o jista’ jibni fuq immaġnijiet u test fil-kuntest taċ-chat, u jiżgura konsistenza tul il-proċess kollu. Pereżempju, jekk qed tiddisinja karattru għal video game, id-dehra tal-karattru tibqa’ koerenti matul iterazzjonijiet multipli hekk kif tirfina u tesperimenta.

Give this cat a detective hat and a monocle

^{Best of 1}

turn this into a triple A video games made with a 4k game engine and add some User interface as overlay from a mystery RPG where we can see a health bar and a minimap at the top as well as spells at the bottom with consistent and iconography

^{Best of 1}

update to a landscape image 16:9 ratio, add more spells in the UI, and unzoom the visual so that we see the cat in a third person view walking through a steampunk manhattan creating beautiful contrast and lighting like in the best triple A game, with cool-toned colors

^{Best of 2}

create the interface when the player opens the menu and we see the cat's character profile with his equipment and another page showing active quests (and it should make sense in relationship with the universe worldbuilding we are describing in the image)

^{Best of 8}

credit creator: Manuel Sainsily

Segwitu tal-istruzzjonijiet

Il-ġenerazzjoni tal-immaġnijiet ta’ GPT‑4o ssegwi prompts dettaljati b’attenzjoni għad-dettall. Filwaqt li sistemi oħra jsibu diffikultà b’madwar 5-8 oġġetti, GPT‑4o jista’ jimmaniġġja sa 10-20 oġġett differenti. Ir-rabta aktar stretta bejn l-oġġetti u l-karatteristiċi u r-relazzjonijiet tagħhom tippermetti kontroll aħjar.

A square image containing a 4 row by 4 column grid containing 16 objects on a white background. Go from left to right, top to bottom. Here’s the list:
1. a blue star
2. red triangle
3. green square
4. pink circle
5. orange hourglass
6. purple infinity sign
7. black and white polka dot bowtie
8. tiedye "42"
9. an orange cat wearing a black baseball cap
10. a map with a treasure chest
11. a pair of googly eyes
12. a thumbs up emoji
13. a pair of scissors
14. a blue and white giraffe
15. the word "OpenAI" written in cursive
16. a rainbow-colored lightning bolt

^{Best of 5}

Tagħlim fil-kuntest

GPT‑4o jista’ janalizza u jitgħallem minn immaġnijiet imtellgħin mill-utenti, billi jintegra bla xkiel id-dettalji tagħhom fil-kuntest tiegħu biex jinforma l-ġenerazzjoni tal-immaġnijiet.

draw a design for a vehicle with triangular wheels, using these images as reference.
label the front wheel, the back wheel, and at the of the diagram say (in small caps)
TRIANGLE WHEELED VEHICLE. English Patent. 2025. OPENAI.

^{Best of ~16}

now put this in a photo taken in new york city.

^{Best of ~16}

Għarfien tad-dinja

Il-ġenerazzjoni nattiva tal-immaġnijiet tippermetti lil 4o jorbot l-għarfien tiegħu bejn it-test u l-immaġnijiet, u dan iwassal għal mudell li jidher aktar intelliġenti u aktar effiċjenti.

Code Example (Three.js)

HTML

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>OpenAI Banner</title>
6    <style>
7      body { margin: 0; overflow: hidden; }
8      canvas { display: block; }
9    </style>
10  </head>
11  <body>
12    <script type="module">
13      import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js';
14      import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/controls/OrbitControls.js';
15      import { FontLoader } from 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/loaders/FontLoader.js';
16      import { TextGeometry } from 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/geometries/TextGeometry.js';
17
18      const scene = new THREE.Scene();
19      const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
20      const renderer = new THREE.WebGLRenderer({ antialias: true });
21      renderer.setSize(window.innerWidth, window.innerHeight);
22      document.body.appendChild(renderer.domElement);
23
24      // Lighting
25      const light = new THREE.AmbientLight(0xffffff, 1);
26      scene.add(light);
27
28      const dirLight = new THREE.DirectionalLight(0xffffff, 1);
29      dirLight.position.set(0, 5, 10);
30      scene.add(dirLight);
31
32      // Camera position
33      camera.position.z = 20;
34
35      // Controls
36      const controls = new OrbitControls(camera, renderer.domElement);
37
38      // Banner background
39      const bannerGeometry = new THREE.PlaneGeometry(20, 10);
40      const bannerMaterial = new THREE.MeshStandardMaterial({ color: 0x1a1a1a });
41      const banner = new THREE.Mesh(bannerGeometry, bannerMaterial);
42      scene.add(banner);
43
44      // OpenAI Logo texture (placeholder)
45      const loader = new THREE.TextureLoader();
46      loader.load('https://upload.wikimedia.org/wikipedia/commons/4/4d/OpenAI_Logo.svg', texture => {
47        const logoGeometry = new THREE.PlaneGeometry(4, 4);
48        const logoMaterial = new THREE.MeshBasicMaterial({ map: texture, transparent: true });
49        const logo = new THREE.Mesh(logoGeometry, logoMaterial);
50        logo.position.set(-5, 0, 0.1); // Slightly in front of the banner
51        scene.add(logo);
52      });
53
54      // Load font and add text
55      const fontLoader = new FontLoader();
56      fontLoader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', font => {
57        const textGeometry = new TextGeometry("I am 4-o", {
58          font: font,
59          size: 1,
60          height: 0.2,
61          curveSegments: 12,
62          bevelEnabled: true,
63          bevelThickness: 0.02,
64          bevelSize: 0.02,
65          bevelOffset: 0,
66          bevelSegments: 5
67        });
68
69        textGeometry.center();
70
71        const textMaterial = new THREE.MeshStandardMaterial({ color: 0x00ffcc });
72        const textMesh = new THREE.Mesh(textGeometry, textMaterial);
73        textMesh.position.set(5, -0.5, 0.1); // Opposite side of logo
74        scene.add(textMesh);
75      });
76
77      // Resize handler
78      window.addEventListener('resize', () => {
79        camera.aspect = window.innerWidth / window.innerHeight;
80        camera.updateProjectionMatrix();
81        renderer.setSize(window.innerWidth, window.innerHeight);
82      });
83
84      // Render loop
85      function animate() {
86        requestAnimationFrame(animate);
87        controls.update();
88        renderer.render(scene, camera);
89      }
90
91      animate();
92    </script>
93  </body>
94</html>

make an image of what this means to you

Fotorealiżmu u stil

It-taħriġ fuq immaġnijiet li jirriflettu varjetà kbira ta’ stili ta’ immaġni jippermetti lill-mudell joħloq jew jittrasforma immaġnijiet b’mod konvinċenti.

A candid paparazzi-style photo of Karl Marx hurriedly walking through the parking lot of the Mall of America, glancing over his shoulder with a startled expression as he tries to avoid being photographed. He’s clutching multiple glossy shopping bags filled with luxury goods. His coat flutters behind him in the wind, and one of the bags is swinging as if he’s mid-stride. Blurred background with cars and a glowing mall entrance to emphasize motion. Flash glare from the camera partially overexposes the image, giving it a chaotic, tabloid feel.
A candid paparazzi-style photo of Karl Marx hurriedly walking through the parking lot of the Mall of America, glancing over his shoulder with a startled expression as he tries to avoid being photographed. He’s clutching multiple glossy shopping bags filled with luxury goods. His coat flutters behind him in the wind, and one of the bags is swinging as if he’s mid-stride. Blurred background with cars and a glowing mall entrance to emphasize motion. Flash glare from the camera partially overexposes the image, giving it a chaotic, tabloid feel.
A candid paparazzi-style photo of Karl Marx hurriedly walking through the parking lot of the Mall of America, glancing over his shoulder with a startled expression as he tries to avoid being photographed. He’s clutching multiple glossy shopping bags filled with luxury goods. His coat flutters behind him in the wind, and one of the bags is swinging as if he’s mid-stride. Blurred background with cars and a glowing mall entrance to emphasize motion. Flash glare from the camera partially overexposes the image, giving it a chaotic, tabloid feel.

A cat looking into a puddle of water on a street, but its reflection is that of a tiger, and both reflections are realistically distorted by ripples in the water — A candid paparazzi-style photo of Karl Marx hurriedly walking through the parking lot of the Mall of America, glancing over his shoulder with a startled expression as he tries to avoid being photographed. He’s clutching multiple glossy shopping bags filled with luxury goods. His coat flutters behind him in the wind, and one of the bags is swinging as if he’s mid-stride. Blurred background with cars and a glowing mall entrance to emphasize motion. Flash glare from the camera partially overexposes the image, giving it a chaotic, tabloid feel.
A candid paparazzi-style photo of Karl Marx hurriedly walking through the parking lot of the Mall of America, glancing over his shoulder with a startled expression as he tries to avoid being photographed. He’s clutching multiple glossy shopping bags filled with luxury goods. His coat flutters behind him in the wind, and one of the bags is swinging as if he’s mid-stride. Blurred background with cars and a glowing mall entrance to emphasize motion. Flash glare from the camera partially overexposes the image, giving it a chaotic, tabloid feel.
A candid paparazzi-style photo of Karl Marx hurriedly walking through the parking lot of the Mall of America, glancing over his shoulder with a startled expression as he tries to avoid being photographed. He’s clutching multiple glossy shopping bags filled with luxury goods. His coat flutters behind him in the wind, and one of the bags is swinging as if he’s mid-stride. Blurred background with cars and a glowing mall entrance to emphasize motion. Flash glare from the camera partially overexposes the image, giving it a chaotic, tabloid feel.

Limitazzjonijiet

Il-mudell tagħna mhuwiex perfett. Aħna konxji minn bosta limitazzjonijiet bħalissa li se naħdmu biex nindirizzawhom permezz ta’ titjib fil-mudell wara t-tnedija inizjali.

Innutajna li GPT‑4o xi kultant jista’ jaqta’ wisq mill-qrib immaġnijiet itwal, bħal posters, speċjalment lejn in-naħa t’isfel.

Sigurtà

F’konformità mal-ispeċifikazzjoni tal-mudell tagħna, aħna nimmiraw li nimmassimizzaw il-libertà kreattiva billi nappoġġjaw każijiet ta’ użu ta’ valur bħall-iżvilupp tal-logħob, l-esplorazzjoni storika u l-edukazzjoni—filwaqt li nżommu standards qawwija ta’ sigurtà. Fl-istess ħin, jibqa’ importanti daqs qatt qabel li nimblukkaw talbiet li jiksru dawk l-istandards. Hawn taħt hemm evalwazzjonijiet ta’ oqsma addizzjonali ta’ riskju fejn qed naħdmu biex nippermettu kontenut sigur u ta’ utilità għolja u nappoġġjaw espressjoni kreattiva usa’ għall-utenti.

Provenjenza permezz ta’ C2PA u tfittxija interna riversibbli
L-immaġnijiet iġġenerati kollha jiġu b’metadata C2PA⁠, li tidentifika immaġni bħala li ġejja minn GPT‑4o, biex tipprovdi trasparenza. Bnejna wkoll għodda interna ta’ tfittxija li tuża attributi tekniċi tal-ġenerazzjonijiet biex tgħin tivverifika jekk il-kontenut ġiex mill-mudell tagħna.

Nibblukkaw l-affarijiet ħżiena
Qed inkomplu nimblukkaw talbiet għal immaġnijiet iġġenerati li jistgħu jiksru l-politiki tal-kontenut tagħna, bħal materjal ta’ abbuż sesswali tat-tfal u deepfakes sesswali. Meta immaġnijiet ta’ nies reali jkunu fil-kuntest, ikollna restrizzjonijiet aktar stretti dwar x’tip ta’ xbihat jistgħu jinħolqu, b’salvagwardji partikolarment robusti madwar in-nudità u l-vjolenza grafika. Bħal kull tnedija, is-sigurtà qatt ma tkun lesta u pjuttost tibqa’ qasam kontinwu ta’ investiment. Hekk kif nitgħallmu aktar dwar l-użu ta’ dan il-mudell fid-dinja reali, aħna naġġustaw il-politiki tagħna kif xieraq.

Għal aktar dwar l-approċċ tagħna, żur l-addendum għall-kard tas-sistema GPT‑4o⁠ tal-ġenerazzjoni tal-immaġnijiet.

Nużaw ir-raġunament biex insaħħu s-sigurtà
Simili għax-xogħol tagħna dwar allinjament deliberattiv⁠, ħarriġna LLM ta’ raġunament biex jaħdem direttament minn speċifikazzjonijiet ta’ sigurtà miktuba mill-bnedmin u interpretabbli. Użajna dan l-LLM ta’ raġunament waqt l-iżvilupp biex jgħinna nidentifikaw u nindirizzaw ambigwitajiet fil-politiki tagħna. Flimkien mal-avvanzi multimodali tagħna u t-tekniki eżistenti ta’ sigurtà żviluppati għal ChatGPT u Sora, dan jippermettilna nimmoderaw⁠ kemm it-test tal-input kif ukoll l-immaġnijiet tal-output skont il-politiki tagħna.

Aċċess u disponibbiltà

Il-ġenerazzjoni tal-immaġnijiet 4o qed tibda titnieda mil-lum għall-utenti ta’ Plus, Pro, Team u Free bħala l-ġeneratur default tal-immaġnijiet f’ChatGPT, bl-aċċess għal Enterprise u Edu jasal dalwaqt. Hija disponibbli wkoll għall-użu f’Sora. Għal dawk li għandhom post speċjali f’qalbhom għal DALL·E, xorta tista’ tintuża permezz ta’ GPT dedikat ta’ DALL·E.

L-iżviluppaturi dalwaqt se jkunu jistgħu jiġġeneraw immaġnijiet b’GPT‑4o permezz tal-API, bl-aċċess jibda jitnieda fil-ġimgħat li ġejjin.

Il-ħolqien u l-personalizzazzjoni tal-immaġnijiet huma sempliċi daqs li tiċċettja billi tuża GPT‑4o - iddeskrivi biss dak li għandek bżonn, inklużi kwalunkwe dettalji speċifiċi bħall-proporzjon tal-aspett, kuluri eżatti billi tuża kodiċijiet hex, jew sfond trasparenti. Minħabba li dan il-mudell joħloq stampi aktar dettaljati, l-immaġnijiet jieħdu aktar żmien biex jidhru, spiss sa minuta waħda.

credit creator: [Alex Duffy](https://every.to/@AlxAi) — credit creator: Alex Duffy
credit creator: Alex Duffy
credit creator: Alex Duffy

credit creator: [August Kamp](https://www.instagram.com/august.kamp/?igsh=MTRpeG9xd3F2MzEyeg#) — credit creator: Alex Duffy
credit creator: Alex Duffy
credit creator: Alex Duffy

Replay tal-livestream

Awtur

OpenAI

Tmexxija

Gabriel Goh: Ġenerazzjoni tal-immaġnijiet

Jackie Shannon: Prodott ChatGPT

Mengchao Zhong, Wayne Chang: Inġinerija ChatGPT

Rohan Sahai: Prodott u Inġinerija Sora

Brendan Quinn, Tomer Kaftan: Inferenza

Prafulla Dhariwal: Organizzazzjoni multimodali

Riċerka

Riċerka Fundamentali

Allan Jabri, David Medina, Gabriel Goh, Kenji Hata, Lu Liu, Prafulla Dhariwal

Riċerka Ewlenija

Aditya Ramesh, Alex Nichol, Casey Chu, Cheng Lu, Dian Ang Yap, Heewoo Jun, James Betker, Jianfeng Wang, Long Ouyang, Li Jing, Wesam Manassra

Kontributuri għar-Riċerka

Aiden Low, Brandon McKinzie, Charlie Nash, Huiwen Chang, Ishaan Gulrajani, Jamie Kiros, Ji Lin, Kshitij Gupta, Yang Song

Imġiba tal-Mudell

Laurentia Romaniuk

Organizzazzjoni Multimodali

Andrew Gibiansky, Yang Lu

Data

Mexxejja tad-Data

Gildas Chabot, James Park Lennon

Data

Arshi Bhatnagar, Dragos Oprica, Rohan Kshirsagar, Spencer Papay, Szi-chieh Yu, Wesam Manassra, Yilei Qian

Moderaturi

Hazel Byrne, Jennifer Luckenbill, Mariano López

Konsulenti tad-Data Umana

Long Ouyang

Skalar

Mexxejja tal-Inferenza

Brendan Quinn, Tomer Kaftan

Inferenza

Alyssa Huang, Jacob Menick, Nick Stathas, Ruslan Vasilev, Stanley Hsieh

Applikat

Mexxej tal-Prodott ChatGPT

Jackie Shannon

Mexxejja tal-Inġinerija ChatGPT

Mengchao Zhong, Wayne Chang

Mexxej tad-Disinn tal-Prodott

Matt Chan

Xjenza tad-Data

Xiaolin Hao

ChatGPT

Andrew Sima, Annie Cheng, Benjamin Goh, Boyang Niu, Dian Ang Yap, Duc Tran, Edede Oiwoh, Eric Zhang, Ethan Chang, Jeffrey Dunham, Jay Chen, Kan Wu, Karen Li, Kelly Stirman, Mengyuan Xu, Michelle Qin, Ola Okelola, Pedro Aguilar, Rocky Smith, Rohit Ramchandani, Sara Culver, Sean Fitzgerald, Vlad Fomenko, Wanning Jiang, Wesam Manassra, Xiaolin Hao, Yilei Qian

Sora

Mexxejja tal-Prodott Sora

Rohan Sahai, Wesam Manassra

Prodott u Inġinerija Sora

Boyang Niu, David Schnurr, Gilman Tolle, Joe Taylor, Joey Flynn, Mike Starr, Rajeev Nayak, Rohan Sahai, Wesam Manassra

Sigurtà

Mexxej tas-Sigurtà

Somay Jain

Sigurtà

Alex Beutel, Andrea Vallone, Botao Hao, Brendan Quinn, Cameron Raymond, Chong Zhang, David Robinson, Eric Wallace, Filippo Raso, Huiwen Chang, Ian Kivlichan, Irina Kofman, Keren Gu-Lemberg, Kristen Ying, Madelaine Boyd, Meghan Shah, Michael Lampe, Owen Campbell-Moore, Rohan Sahai, Rodrigo Riaza Perez, Sam Toizer, Sandhini Agarwal, Troy Peterson

Strateġija

Adam Cohen, Adam Wells, Ally Bennett, Ashley Pantuliano, Carolina Paz, Claudia Fischer, Declan Grabb, Gaby Sacramone-Lutz, Lauren Jonas, Ryan Beiermeister, Shiao Lee, Tom Stasi, Tyce Walters, Ziad Reslan, Zoe Stoll

Marketing u Komunikazzjoni

Mexxejja tal-Komunikazzjoni u l-Marketing

Minnia Feng, Natalie Summers, Taya Christianson

Komunikazzjoni

Alex Baker-Whitcomb, Ashley Tyra, Bailey Richardson, Gaby Raila, Marselus Cayton, Scott Ethersmith, Souki Mansoor

Disinn u Kreattività

Mexxejja

Kendra Rimbach, Veit Moeller

Disinn

Adam Brandon, Adam Koppel, Angela Baek, Cary Hudson, Dana Palmie, Freddie Sulit, Jeffrey Sabin Matsumoto, Leyan Lo, Matt Nichols, Thomas Degry, Vanessa Antonia Schefke, Yara Khakbaz

Ringrazzjamenti Speċjali

Aditya Ramesh, Aidan Clark, Alex Beutel, Ben Newhouse, Ben Rossen, Che Chang, Greg Brockman, Hannah Wong, Ishaan Singal, Jason Kwon, Jiacheng Feng, Jiahui Yu, Joanne Jang, Johannes Heidecke, Kevin Weil, Mark Chen, Mia Glaese, Nick Turley, Raul Puri, Reiichiro Nakano, Rui Shu, Sam Altman, Shuchao Bi, Vinnie Monaco

Code Example (Three.js)

HTML

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>OpenAI Banner</title>
6    <style>
7      body { margin: 0; overflow: hidden; }
8      canvas { display: block; }
9    </style>
10  </head>
11  <body>
12    <script type="module">
13      import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js';
14      import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/controls/OrbitControls.js';
15      import { FontLoader } from 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/loaders/FontLoader.js';
16      import { TextGeometry } from 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/geometries/TextGeometry.js';
17
18      const scene = new THREE.Scene();
19      const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
20      const renderer = new THREE.WebGLRenderer({ antialias: true });
21      renderer.setSize(window.innerWidth, window.innerHeight);
22      document.body.appendChild(renderer.domElement);
23
24      // Lighting
25      const light = new THREE.AmbientLight(0xffffff, 1);
26      scene.add(light);
27
28      const dirLight = new THREE.DirectionalLight(0xffffff, 1);
29      dirLight.position.set(0, 5, 10);
30      scene.add(dirLight);
31
32      // Camera position
33      camera.position.z = 20;
34
35      // Controls
36      const controls = new OrbitControls(camera, renderer.domElement);
37
38      // Banner background
39      const bannerGeometry = new THREE.PlaneGeometry(20, 10);
40      const bannerMaterial = new THREE.MeshStandardMaterial({ color: 0x1a1a1a });
41      const banner = new THREE.Mesh(bannerGeometry, bannerMaterial);
42      scene.add(banner);
43
44      // OpenAI Logo texture (placeholder)
45      const loader = new THREE.TextureLoader();
46      loader.load('https://upload.wikimedia.org/wikipedia/commons/4/4d/OpenAI_Logo.svg', texture => {
47        const logoGeometry = new THREE.PlaneGeometry(4, 4);
48        const logoMaterial = new THREE.MeshBasicMaterial({ map: texture, transparent: true });
49        const logo = new THREE.Mesh(logoGeometry, logoMaterial);
50        logo.position.set(-5, 0, 0.1); // Slightly in front of the banner
51        scene.add(logo);
52      });
53
54      // Load font and add text
55      const fontLoader = new FontLoader();
56      fontLoader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', font => {
57        const textGeometry = new TextGeometry("I am 4-o", {
58          font: font,
59          size: 1,
60          height: 0.2,
61          curveSegments: 12,
62          bevelEnabled: true,
63          bevelThickness: 0.02,
64          bevelSize: 0.02,
65          bevelOffset: 0,
66          bevelSegments: 5
67        });
68
69        textGeometry.center();
70
71        const textMaterial = new THREE.MeshStandardMaterial({ color: 0x00ffcc });
72        const textMesh = new THREE.Mesh(textGeometry, textMaterial);
73        textMesh.position.set(5, -0.5, 0.1); // Opposite side of logo
74        scene.add(textMesh);
75      });
76
77      // Resize handler
78      window.addEventListener('resize', () => {
79        camera.aspect = window.innerWidth / window.innerHeight;
80        camera.updateProjectionMatrix();
81        renderer.setSize(window.innerWidth, window.innerHeight);
82      });
83
84      // Render loop
85      function animate() {
86        requestAnimationFrame(animate);
87        controls.update();
88        renderer.render(scene, camera);
89      }
90
91      animate();
92    </script>
93  </body>
94</html>

make an image of what this means to you