Published unlisted
Edited
Jan 11, 2021
md`# DALL·E: Samples 1.9.1`
// "v1" of all image cells, using default grid
// use final data
// 1.8.3 -> move data to separate variables from 1.8.2 so don't have to wait for all JSONs to load
// 1.9.1 -> adjust "expanded view sstyles"
base_url_new = "https://cdn.openai.com/dall-e/v2/metadata_zip/"
use_old = false
data_shape = await read(base_url_new + "shape.json")
data_material = await read(base_url_new + "material.json")
data_multiple_copies = await read(base_url_new + "multiple_copies.json")
data_relative_positions = await read(base_url_new + "relative_positions.json")
data_stacking_snap = await read(base_url_new + "stacking_snap.json")
data_multiple_attributes = await read(base_url_new + "multiple_attributes.json")
data_camera_angles = await read(base_url_new + "camera_angles.json")
data_three_d_views = await read(base_url_new + "three_d_views.json")
data_rotating_mirror = await read(base_url_new + "rotating_mirror.json")
data_cross_sections = await read(base_url_new + "cross_sections.json")
data_macro_photos = await read(base_url_new + "macro_photos.json")
data_location_and_setting = await read(base_url_new + "location_and_setting.json")
data_text_rendering = await read(base_url_new + "text_rendering_fixed.json")
data_unusual_media = await read(base_url_new + "unusual_media.json")
data_male_fashion_design = await read(base_url_new + "male_fashion_design.json")
data_female_fashion_design = await read(base_url_new + "female_fashion_design.json")
data_living_room_design = await read(base_url_new + "living_room_design.json")
data_bedroom_design = await read(base_url_new + "bedroom_design.json")
data_animal_concept_transfer = await read(base_url_new + "animal_concept_transfer.json")
data_product_design = await read(base_url_new + "product_design.json")
data_emojis = await read(base_url_new + "emojis.json")
data_animal_chimeras = await read( (use_old ? base_url_old : base_url_new) + "animal_chimeras.json" )
data_anthropomorphism = await read( (use_old ? base_url_old : base_url_new) + "anthropomorphism.json")
data_im2im_animal = await read( (use_old ? base_url_old : base_url_new) + "im2im_animal.json")
data_im2im_object = await read( (use_old ? base_url_old : base_url_new) + "im2im_object.json")
data_rpm = await read((use_old ? base_url_old : base_url_new) + "rpm.json")
data_countries = await read((use_old ? base_url_old : base_url_new) + "countries.json")
data_neighborhood = await read((use_old ? base_url_old : base_url_new) + "neighborhood.json")
data_landmarks = await read((use_old ? base_url_old : base_url_new) + "landmarks.json")
data_timelines = await read((use_old ? base_url_old : base_url_new) + "timelines.json")
md`---
### Prompts & Samples`
shape_images = genSamples(data_shape, shape)
viewof material = genSentence(data_material)
material_images = genSamples(data_material, material)
viewof multiple_copies = genSentence(data_multiple_copies)
multiple_copies_images = genSamples(data_multiple_copies, multiple_copies)
viewof relative_positions = genSentence(data_relative_positions)
relative_positions_images = genSamples(data_relative_positions, relative_positions)
viewof stacking_snap = genSentence(data_stacking_snap)
stacking_snap_images = genSamples(data_stacking_snap, stacking_snap)
viewof multiple_attributes = genSentence(data_multiple_attributes)
multiple_attributes_images = genSamples(data_multiple_attributes, multiple_attributes)
viewof camera_angles = genSentence(data_camera_angles)
camera_angles_images = genSamples(data_camera_angles, camera_angles)
viewof three_d_views = genSentence(data_three_d_views)
three_d_views_images = genSamples(data_three_d_views, three_d_views)
viewof rotating_head = genSentence(data_rotating_head)
viewof rotating_mirror = genSentence(data_rotating_mirror)
rotating_mirror_images = genSamples(data_rotating_mirror, rotating_mirror, {"img": ['3692294057','2206640957','3455973924','1526093036','4008499879','2433512330','3578913124','1448921883','1713503090','1985806136','39634473','1254905888','3325834540','1582680897','208537097','1044707771','2409465596','1822003580','709459336','2839598972','1607052629','2453201871','3247400296','1081278535','3242189816','3667162808','179411103','3924037635','286888521','3867603297'][rotating_mirror_image_prompt], "start_at": "7,12"})
viewof cross_sections = genSentence(data_cross_sections)
cross_sections_images = genSamples(data_cross_sections, cross_sections)
viewof macro_photos = genSentence(data_macro_photos)
macro_photos_images = genSamples(data_macro_photos, macro_photos)
location_and_setting_images = genSamplesExpandOne(data_location_and_setting, location_and_setting, 3)
viewof unusual_media = genSentence(data_unusual_media)
unusual_media_images = genSamples(data_unusual_media, unusual_media)
viewof text_rendering = genSentence(data_text_rendering)
text_rendering_images = genSamples(data_text_rendering, text_rendering)
viewof male_fashion_design = genSentence(data_male_fashion_design)
male_fashion_design_images = genSamples(data_male_fashion_design, male_fashion_design)
viewof female_fashion_design = genSentence(data_female_fashion_design)
female_fashion_design_images = genSamples(data_female_fashion_design, female_fashion_design)
viewof living_room_design = genSentence(data_living_room_design)
living_room_design_images = genSamples(data_living_room_design, living_room_design)
viewof bedroom_design = genSentence(data_bedroom_design)
bedroom_design_images = genSamples(data_bedroom_design, bedroom_design)
viewof animal_concept_transfer = genSentence(data_animal_concept_transfer)
animal_concept_transfer_images = genSamples(data_animal_concept_transfer, animal_concept_transfer)
viewof product_design = genSentence(data_product_design)
product_design_images = genSamples(data_product_design, product_design)
viewof emojis = genSentence(data_emojis)
emojis_images = genSamples(data_emojis, emojis)
animal_chimeras_images = genSamples(data_animal_chimeras, animal_chimeras)
viewof anthropomorphism = genSentence(data_anthropomorphism)
anthropomorphism_images = genSamples(data_anthropomorphism, anthropomorphism)
im2im_animal_images = genSamples(data_im2im_animal, im2im_animal.slice(0,-1).concat(im2im_animal_image_prompt))
im2im_object_images = genSamples(data_im2im_object, im2im_object.slice(0,-1).concat(im2im_object_image_prompt))
viewof rpm = genSentence(data_rpm)
rpm_images = genSamples(data_rpm, [rpm_image_prompt], {}, 12)
viewof countries = genSentence(data_countries)
countries_images = genSamples(data_countries, countries)
viewof neighborhood = genSentence(data_neighborhood)
data_neighborhood
neighborhood_images = genSamples(data_neighborhood, neighborhood)
viewof landmarks = genSentence(data_landmarks)
landmarks_images = genSamples(data_landmarks, landmarks, {'img':landmarks_image_prompt})
timelines_images = genSamplesExpandOne(data_timelines, timelines, 1, {"img": timelines_image_prompt, "start_at": "2,0"})
data_clip = await read("https://cdn.openai.com/dall-e/v2/metadata/clip.json")
viewof clip = genSentence(data_clip, [1])
clip_images = genSamplesExpandOne8(data_clip, clip, 1)
md`---
### Functions`
function genSamplesExpandOne8(data, prompt, i, options) {
var images = getDefaultSamplesExpand(data, prompt, i, options)
var samples_wrap = d3.create("div")
samples_wrap.attr("class", "de-samples")
var samples_row = samples_wrap.append("div").attr("class", "row").selectAll("div")
.data(images)
.join("div")
.attr("class", "small-copy col-4 col-sm-3 col-md-2.4")
samples_row.append("div")
.html(url => `${url[0]}`)
for (var i = 0; i < 8; i++) {
samples_row.append("div")
.style("background-image", url => `url(${url[1][i]})`)
.attr("class", "de-sample bg-cover bg-fg-2 aspect-1/1")
}
return samples_wrap.node()
}
import {input} from "@jashkenas/inputs"
function read(url) {
return fetch(url).then((response) => response.json())
}
function getOptions(completion){
var keys = Object.keys(completion.completions[0])
keys.splice(keys.indexOf("image_url_prefix"),1)
var keysDict = {}
for (var i = 0; i < keys.length; i++) {
keysDict[keys[i]] = []
}
for (var j = 0; j < keys.length; j++) {
for (var i = 0; i < completion.completions.length; i++) {
var option = completion.completions[i][keys[j]]
if (Array.isArray(option)) {
option = option.toString()
}
keysDict[keys[j]].push(option)
}
keysDict[keys[j]] = Array.from(new Set(keysDict[keys[j]])).sort()
}
return keysDict
}
function filterOpt(completion, options){
for (var i = 0; i < completion.completions.length; i++) {
var match = true
for (var key in options) {
match = match && (options[key] == completion.completions[i][key])
}
if (match) {
return completion.completions[i]
}
}
return []
}
function genSamplesExpandOptions(data, prompt, optionsArray, options) {
var images = []
for (var i = 0; i < optionsArray[1].length; i++) {
var opt = {...options}
opt[optionsArray[0]] = optionsArray[1][i]
var urlOpt = toURLs(data, filterOpt(getSelection(data, prompt), opt))
images.push([optionsArray[1][i], urlOpt])
}
var samples_wrap = d3.create("div")
samples_wrap.attr("class", "de-samples")
var samples_row = samples_wrap.append("div").attr("class", "row").selectAll("div")
.data(images)
.join("div")
.attr("class", "col-4 col-sm-3 col-md-2.4")
var samples_row_row = samples_row.append("div")
for (var i = 0; i < 4; i++) {
samples_row_row.append("div")
.style("background-image", url => `url(${url[1][i]})`)
.attr("class", "de-sample bg-cover bg-fg-2 aspect-1/1")
}
return samples_wrap.node()
}
function genSamplesExpandOne(data, prompt, i, options) {
var images = getDefaultSamplesExpand(data, prompt, i, options)
var samples_wrap = d3.create("div")
samples_wrap.attr("class", "de-samples")
var samples_row = samples_wrap.append("div").attr("class", "row").selectAll("div")
.data(images)
.join("div")
.attr("class", "small-copy line-height-1.3 col-4 col-sm-3 col-md-2.4 mb-0.75 mt-n0.125")
var samples_row_inner = samples_row.append("div").attr("class", "h-100 d-flex flex-column justify-content-end")
samples_row_inner.append("div")
.html(url => `${url[0]}`).attr("class", "mb-1/12")
var samples_row_images = samples_row_inner.append("div")
for (var i = 0; i < 2; i++) {
samples_row_images.append("div")
.style("background-image", url => `url(${url[1][i]})`)
.attr("class", "de-sample bg-cover bg-fg-2 aspect-1/1")
}
return samples_wrap.node()
}
function genSamples(data, prompt, options, n) {
var images = toURLs(data, filterOpt(getSelection(data, prompt), options)).slice(0,n)
var samples_wrap = d3.create("div")
samples_wrap.attr("class", "de-samples")
var samples_row = samples_wrap.append("div").attr("class", "row").selectAll("div")
.data(images)
.join("div")
.attr("class", (d, i) => (i >= 30)
? "col-4 col-sm-3 col-md-2.4 d-none d-sm-block d-md-none"
: "col-4 col-sm-3 col-md-2.4")
samples_row.append("div")
.style("background-image", url => `url(${url})`)
.attr("class", "de-sample bg-cover bg-fg-2 aspect-1/1")
return samples_wrap.node()
}
n = 32 // number of images by default
function toURLs(data, completions, i) {
if (i === undefined) {
i = n
}
return d3.range(n).map((i) => data.base_image_url + "/" + completions.image_url_prefix + "_" + i + ".png")
}
function getDefaultSamplesExpand(data, prompt, i, options) {
function replace(x, i, xi) {
var x = [...x]
x[i] = xi
return x
}
return data.variable_info[i].values.map( (x) => {
return [x, toURLs(data, filterOpt(getSelection(data, replace(prompt, i, x)), options )) ]
} )
}
function generateInput (vars, callback, selection) {
let options = [];
vars.forEach(function (v) {
options.push(`<option value="${v}" ${(selection==v) ? "selected" : "" }>${v}</option>`)
});
const input = html`
<select class="dropselect">
${options}
</select>
`;
const inputWrap = html`
<div class="dropselect-wrap fade">
${input}
</div>
`;
input.oninput = (event) => {
callback(input.value)
}
return inputWrap;
}
function getSelection(data, selected) {
console.log(data, selected)
// slow, but fast enough ...
for (var i = 0; i < data['completion_info'].length; i++) {
if (arrayMatch(selected, data['completion_info'][i]["variable_assignments"]) ){
return data['completion_info'][i]
}
}
}
function arrayEquals(a, b) {
return Array.isArray(a) &&
Array.isArray(b) &&
a.length === b.length &&
a.every((val, index) => val === b[index]);
}
function parseString(caption) {
var match = caption.matchAll(/\{[0-9]:[^\}]+\}/g)
var match = [...match]
var cursor = 0
var captionSplit = []
for (var i = 0; i < match.length; i++) {
const end = match[i].index + match[i][0].length
captionSplit.push(caption.slice(cursor, match[i].index))
var var_value = caption.slice(match[i].index+1, end-1).split(":")
captionSplit.push([parseInt(var_value[0]),var_value[1]])
cursor = end
}
captionSplit.push(caption.slice(cursor, caption.length))
return captionSplit
}
function arrayMatch(arr1, arr2) {
// Check if the arrays are the same length
if (arr1.length !== arr2.length) return false;
// Check if all items exist and are in the same order
for (var i = 0; i < arr1.length; i++) {
if (arr1[i] !== arr2[i]) return false;
}
// Otherwise, return true
return true;
};
function genSentence (data, ignoreList, f) {
if (f === undefined) {
f = (x,y) => y
}
// Stable global variable
var selected = data['variable_info'].map( (x) => x.default )
var selected_old = data['variable_info'].map( (x) => x.default )
function sentence(caption) {
var output_div = html`<div class="medium-copy"></div>`
function handleEventChangeGenerator(varnum){
function handleEventChange(value) {
selected_old = [...selected]
selected[varnum] = value
selected = f(selected_old, selected)
console.log(selected)
var selection = getSelection(data, selected)
const newdiv = sentence(selection.text, data)
output_div.removeChild(output_div.firstChild);
output_div.append(newdiv)
}
return handleEventChange
}
var splits = parseString(caption)
var spans = []
for (var i = 0; i < splits.length; i++) {
if (typeof(splits[i]) == typeof([])) {
if (ignoreList === undefined || ignoreList.indexOf(splits[i][0]) == -1) {
var inputfield = html`<span class="position-relative"></span>`
var dropdown = generateInput(data['variable_info'][splits[i][0]].values,
handleEventChangeGenerator(splits[i][0]),
selected[splits[i][0]])
var shadowText = html`<span class="medium-copy shadow">${splits[i][1]}</span>`
document.body.appendChild(shadowText);
console.log(document.readyState)
var width = shadowText.offsetWidth
console.log(width)
document.body.removeChild(document.body.lastChild)
inputfield.append(dropdown)
inputfield.append(shadowText)
dropdown.style.width = (width) + "px"
spans.push(inputfield)
} else {
spans.push(html`<span> … </span>`)
}
}
else {
spans.push(html`<span>${splits[i]}</span>`)
}
}
output_div.value = f(selected_old, selected)
output_div.append(html`${spans}`)
// console.log(selected)
// handleEventChangeGenerator(0)(selected[0])
// handleEventChangeGenerator(1)(selected[1])
return output_div
}
// setTimeout(() => {
// sentence(getSelection(data, selected).text)
// }, 500); // add delay on first input so width is correct
console.log(selected)
return sentence(getSelection(data, selected).text)
}
md`---
### Requires`
d3 = require("d3@5")
import {select, slider} from "@jashkenas/inputs"
openaicss = {
return html`<link rel="stylesheet" type="text/css" href="https://cdn.openai.com/miscellaneous/observable-2.1.1/styles/openai-css.css">`
}
inlinecss = {
return html`<style>
.dropselect-wrap {
min-width: unset;
color: rgb(0,0,0,0);
}
.dropselect-wrap:after {
content: "";
}
.dropselect {
background-image: linear-gradient(180deg, rgba(var(--fg), 0.8) 75%, rgba(var(--fg), 0.8) 0);
background-repeat: repeat-x;
background-size: 1px 1px;
background-position: 0 85%;
}
.dropselect option {
color: initial; /* fix Windows bug */
}
.shadow {
pointer-events: none;
user-select: none;
white-space: nowrap;
position: absolute;
left: 0;
top: -0.1rem;
}
.dropselect-wrap:hover + .shadow {
opacity: 0.6;
}
.de-samples .row {
margin-left: -2px !important;
margin-right: -2px !important;
}
.de-samples [class*="col-"] {
padding-left: 2px !important;
padding-right: 2px !important;
}
.de-sample {
margin-bottom: 4px;
}
</style>`
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.