DALL·E: Creating Images from Text

DALL·E is a 12-billion parameter version of GPT-3 trained to generate images from text descriptions, using a dataset of text–image pairs. We’ve found that it has a diverse set of capabilities, including creating anthropomorphized versions of animals and objects, combining unrelated concepts in plausible ways, rendering text, and applying transformations to existing images.

If you give DALL·E the task to generate images with “an armchair in the shape of an avocado”, you get this:

And to say I was questioning the power of computers earlier today 😅

DALL·E: Creating Images from Text →

🤓 Clever name too: Dali + WALL·E = DALL·E

Fun with browsers: how to get an image into the current page

Christian Heilmann created a demo page where a user can add an image to the page through various ways.

I gave myself the task to build an interface to make it as easy as possible for a user to add an image into the document. I wanted to support:

  • Image upload
  • Drag and Drop
  • Copy and Paste

Each scenario requires a small tad of JS. Here’s a pen with the final result:

Fun with browsers: how to get an image into the current page →

FastImage, performant React Native image component

React Native’s Image component handles image caching like browsers for the most part. If the server is returning proper cache control headers for images you’ll generally get the sort of built in caching behavior you’d have in a browser. Even so many people have noticed:

  • Flickering.
  • Cache misses.
  • Low performance loading from cache.
  • Low performance in general.

FastImage is an Image replacement that solves these issues. FastImage is a wrapper around SDWebImage (iOS) and Glide (Android).

Don’t forget to react-native link after installation, as some native counterparts are used:

yarn add react-native-fast-image
react-native link

FastImage is basically a drop-in replacement for Image, but with some extras (such as prioritisation):

import FastImage from 'react-native-fast-image';

const YourImage = () =>
  <FastImage
    style={styles.image}
    source={{
      uri: 'https://unsplash.it/400/400?image=1',
      headers:{ Authorization: 'someAuthToken' },
      priority: FastImage.priority.normal,
    }}
    resizeMode={FastImage.resizeMode.contain}
  />

FastImage, performant React Native image component →

Vibrant.js – Extract prominent colors from an image

vibrantjs

Usage is simple:

var vibrant = new Vibrant(img);
var swatches = vibrant.swatches()
for (var swatch in swatches)
    if (swatches.hasOwnProperty(swatch) && swatches[swatch])
        console.log(swatch, swatches[swatch].getHex())

Works by reading in the image, placing it onto a <canvas> element, and then getting all pixel information from that canvas.

Vibrant.js →

Photoshop Google Maps Tile Cutter Script Update (Again)

Five days after the previous update PS_BRAMUS.GoogleMapsTileCutter — a Photoshop Script which automatically chops up a large image into tiles for use with Google Maps — has been updated again.

tilecutter-main

With this new version one can now choose to place all tiles into one and the same folder (as it was before), or use subfolders instead. Handy if you’re exporting 21845 tiles (=all tiles needed for zoom levels 1 through 7) to prevent your system from hogging when accessing the export folder

After exporting the tiles themselves, PS_BRAMUS.GoogleMapsTileCutter now also creates an empty.jpg file for use with the Google Maps implementation. Above that you don’t have to make the implementation yourself anymore as PS_BRAMUS.GoogleMapsTileCutter now also generates an index.html for use with your fresh tiles.

The Don’t export transparent tiles option has been removed for now, as it requires some extra JavaScript logic in the implementation: Better is to have a safe default than a feature which breaks thing for most users. The option might return later though, yet just not right now.

Download PS_BRAMUS.GoogleMapsTileCutter

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Photoshop Google Maps Tile Cutter Script Update

It’s been 1.5 years already since I created PS_BRAMUS.GoogleMapsTileCutter, a Photoshop Script which automatically chops up a large image into tiles for use with Google Maps. Today a huge update was released.

Sparked by an initial pull request by Nick Springer, PS_BRAMUS.GoogleMapsTileCutter now sports a UI dialog in which you can set the options before starting the cutting process. In the previous version one had to change these in the source of the script itself.

tilecutter-progress

One of the new features that was added is the option to prevent empty tiles from being saved. Can come in handy to save bandwidth. Above that the processing was hugely improved for files with lots of layers: right before the tilecutter kicks in the whole image is flattened for much faster processing.

Finally a little feedback dialog was added to give feedback during the processing the image.

tilecutter-progress

Here’s the script in action

Output is still the same … but faster 🙂

Download PS_BRAMUS.GoogleMapsTileCutter

TinyPNG — Compress PNG images while preserving transparency

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colours in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!

Works so well (shaves more than 50% off the files I’ve tested over time) that I’ve included it in my screenshotting flow for screenshots here on bram.us:

  1. Take the screenshot (Retina MBP, thus that’s one BIG screenshot)
  2. Resize the screenshot in Photoshop to 1120px width (coincidentally twice the width of the content column of this site)
  3. Save for web as a .png
  4. Run the save .png through TinyPNG

Need to automate this. Somehow.

TinyPNG →

Photoshop Google Maps Tile Cutter Script (Google Maps Tile Generator)

UPDATE SEPTEMBER 2013: PS_Bramus.GoogleMapsTileCutter has been updated and now includes a nice UI dialog. A video of the new version in action can be viewed on YouTube. The download link below links to the latest version, so no worries there.

Last week, I coded a Google Maps Tile Cutter script for use with Adobe Photoshop. The script automatically cuts/carves a very large image you’ve opened in Photoshop into tiles which you can immediately use in Google Maps.

Download

Example

The source image (originally 5670 x 3402)

The script in action

Note: the flickering is due to the constant canvas resizing that needs to happen

The resulting tiles, ready for use with Google Maps

The Google Maps Integration

A live example of an integration is available at http://bramus.github.com/photoshop-google-maps-tile-cutter/example/

Installation

  • Download and extract PS_Bramus.GoogleMapsTileCutter
  • Move PS_Bramus.GoogleMapsTileCutter.jsx to your Photoshop scripts directory
    • For Photoshop CS5 on Mac OS X this is /Applications/Adobe Photoshop CS5/Presets/Scripts
    • For Photoshop CS5 on Windows this is C:\Program Files\Adobe\Adobe Photoshop CS5\Presets\Scripts
  • Restart Photoshop if it was already running

How to use

Cutting tiles

  • Open Photoshop and open the image you want to process.
  • Access the script from the scripts menu in Photoshop: File > Scripts > PS_Bramus.GoogleMapsTileCutter.
  • The script will start carving the tiles for as many zoom levels as possible.
    • During this phase it will look like Photoshop is going berzerk, this is normal, as it is.
    • Depending on the size of the image it might be a good idea to take coffee break.
  • When the script has finished carving, you will find the tiles on your desktop, in a tilecutter subfolder (~/Desktop/tilecutter)

Implementing the tiles

The resulting tiles can be used directly in Google Maps by setting up a custom map type, using a google.maps.ImageMapType instance

A fully working example is included in the examples directory that came with the download of PS_Bramus.GoogleMapsTileCutter. Just drop in your tiles and it will work.

A live example is available at http://bramus.github.com/photoshop-google-maps-tile-cutter/example/

Notes

  • The included example and Google Maps documentation referenced is for Google Maps Version 3.
  • PS_Bramus.GoogleMapsTileCutter will resize the canvas to being a square one, as this is easier to process and implement

    • A result is that extra (empty) tiles will be generated. In a future version it’ll be possible to omit these tiles from being saved, to save diskspace from being wasted.
  • If you’re familiar with JavaScript, you can adjust lines 11-25 of the script to change some settings like the targetPath (where to save the files), bgColor (background color for empty tiles), etc.

Credits

PS_Bramus.GoogleMapsTileCutter is built by Bram — Bramus! — Van Damme and is based upon the Automatic Tile Cutter by Will James, Curtis Wyatt, and Nate Bundy.

Basically PS_Bramus.GoogleMapsTileCutter is an improved, cleaned up and optimized version derived from their work.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)