app.py

import os.path

import gradio as gr
import json

import numpy.random
import open_clip
from PIL import Image
import requests
import torch
# import torch.nn.functional as F
import numpy as np


# GLOBAL VARIABLES
openai_en_classes = ["tench", "goldfish", "great white shark", "tiger shark", "hammerhead shark", "electric ray", "stingray", "rooster", "hen", "ostrich", "brambling", "goldfinch", "house finch", "junco", "indigo bunting", "American robin", "bulbul", "jay", "magpie", "chickadee", "American dipper", "kite (bird of prey)", "bald eagle", "vulture", "great grey owl", "fire salamander", "smooth newt", "newt", "spotted salamander", "axolotl", "American bullfrog", "tree frog", "tailed frog", "loggerhead sea turtle", "leatherback sea turtle", "mud turtle", "terrapin", "box turtle", "banded gecko", "green iguana", "Carolina anole", "desert grassland whiptail lizard", "agama", "frilled-necked lizard", "alligator lizard", "Gila monster", "European green lizard", "chameleon", "Komodo dragon", "Nile crocodile", "American alligator", "triceratops", "worm snake", "ring-necked snake", "eastern hog-nosed snake", "smooth green snake", "kingsnake", "garter snake", "water snake", "vine snake", "night snake", "boa constrictor", "African rock python", "Indian cobra", "green mamba", "sea snake", "Saharan horned viper", "eastern diamondback rattlesnake", "sidewinder rattlesnake", "trilobite", "harvestman", "scorpion", "yellow garden spider", "barn spider", "European garden spider", "southern black widow", "tarantula", "wolf spider", "tick", "centipede", "black grouse", "ptarmigan", "ruffed grouse", "prairie grouse", "peafowl", "quail", "partridge", "african grey parrot", "macaw", "sulphur-crested cockatoo", "lorikeet", "coucal", "bee eater", "hornbill", "hummingbird", "jacamar", "toucan", "duck", "red-breasted merganser", "goose", "black swan", "tusker", "echidna", "platypus", "wallaby", "koala", "wombat", "jellyfish", "sea anemone", "brain coral", "flatworm", "nematode", "conch", "snail", "slug", "sea slug", "chiton", "chambered nautilus", "Dungeness crab", "rock crab", "fiddler crab", "red king crab", "American lobster", "spiny lobster", "crayfish", "hermit crab", "isopod", "white stork", "black stork", "spoonbill", "flamingo", "little blue heron", "great egret", "bittern bird", "crane bird", "limpkin", "common gallinule", "American coot", "bustard", "ruddy turnstone", "dunlin", "common redshank", "dowitcher", "oystercatcher", "pelican", "king penguin", "albatross", "grey whale", "killer whale", "dugong", "sea lion", "Chihuahua", "Japanese Chin", "Maltese", "Pekingese", "Shih Tzu", "King Charles Spaniel", "Papillon", "toy terrier", "Rhodesian Ridgeback", "Afghan Hound", "Basset Hound", "Beagle", "Bloodhound", "Bluetick Coonhound", "Black and Tan Coonhound", "Treeing Walker Coonhound", "English foxhound", "Redbone Coonhound", "borzoi", "Irish Wolfhound", "Italian Greyhound", "Whippet", "Ibizan Hound", "Norwegian Elkhound", "Otterhound", "Saluki", "Scottish Deerhound", "Weimaraner", "Staffordshire Bull Terrier", "American Staffordshire Terrier", "Bedlington Terrier", "Border Terrier", "Kerry Blue Terrier", "Irish Terrier", "Norfolk Terrier", "Norwich Terrier", "Yorkshire Terrier", "Wire Fox Terrier", "Lakeland Terrier", "Sealyham Terrier", "Airedale Terrier", "Cairn Terrier", "Australian Terrier", "Dandie Dinmont Terrier", "Boston Terrier", "Miniature Schnauzer", "Giant Schnauzer", "Standard Schnauzer", "Scottish Terrier", "Tibetan Terrier", "Australian Silky Terrier", "Soft-coated Wheaten Terrier", "West Highland White Terrier", "Lhasa Apso", "Flat-Coated Retriever", "Curly-coated Retriever", "Golden Retriever", "Labrador Retriever", "Chesapeake Bay Retriever", "German Shorthaired Pointer", "Vizsla", "English Setter", "Irish Setter", "Gordon Setter", "Brittany dog", "Clumber Spaniel", "English Springer Spaniel", "Welsh Springer Spaniel", "Cocker Spaniel", "Sussex Spaniel", "Irish Water Spaniel", "Kuvasz", "Schipperke", "Groenendael dog", "Malinois", "Briard", "Australian Kelpie", "Komondor", "Old English Sheepdog", "Shetland Sheepdog", "collie", "Border Collie", "Bouvier des Flandres dog", "Rottweiler", "German Shepherd Dog", "Dobermann", "Miniature Pinscher", "Greater Swiss Mountain Dog", "Bernese Mountain Dog", "Appenzeller Sennenhund", "Entlebucher Sennenhund", "Boxer", "Bullmastiff", "Tibetan Mastiff", "French Bulldog", "Great Dane", "St. Bernard", "husky", "Alaskan Malamute", "Siberian Husky", "Dalmatian", "Affenpinscher", "Basenji", "pug", "Leonberger", "Newfoundland dog", "Great Pyrenees dog", "Samoyed", "Pomeranian", "Chow Chow", "Keeshond", "brussels griffon", "Pembroke Welsh Corgi", "Cardigan Welsh Corgi", "Toy Poodle", "Miniature Poodle", "Standard Poodle", "Mexican hairless dog (xoloitzcuintli)", "grey wolf", "Alaskan tundra wolf", "red wolf or maned wolf", "coyote", "dingo", "dhole", "African wild dog", "hyena", "red fox", "kit fox", "Arctic fox", "grey fox", "tabby cat", "tiger cat", "Persian cat", "Siamese cat", "Egyptian Mau", "cougar", "lynx", "leopard", "snow leopard", "jaguar", "lion", "tiger", "cheetah", "brown bear", "American black bear", "polar bear", "sloth bear", "mongoose", "meerkat", "tiger beetle", "ladybug", "ground beetle", "longhorn beetle", "leaf beetle", "dung beetle", "rhinoceros beetle", "weevil", "fly", "bee", "ant", "grasshopper", "cricket insect", "stick insect", "cockroach", "praying mantis", "cicada", "leafhopper", "lacewing", "dragonfly", "damselfly", "red admiral butterfly", "ringlet butterfly", "monarch butterfly", "small white butterfly", "sulphur butterfly", "gossamer-winged butterfly", "starfish", "sea urchin", "sea cucumber", "cottontail rabbit", "hare", "Angora rabbit", "hamster", "porcupine", "fox squirrel", "marmot", "beaver", "guinea pig", "common sorrel horse", "zebra", "pig", "wild boar", "warthog", "hippopotamus", "ox", "water buffalo", "bison", "ram (adult male sheep)", "bighorn sheep", "Alpine ibex", "hartebeest", "impala (antelope)", "gazelle", "arabian camel", "llama", "weasel", "mink", "European polecat", "black-footed ferret", "otter", "skunk", "badger", "armadillo", "three-toed sloth", "orangutan", "gorilla", "chimpanzee", "gibbon", "siamang", "guenon", "patas monkey", "baboon", "macaque", "langur", "black-and-white colobus", "proboscis monkey", "marmoset", "white-headed capuchin", "howler monkey", "titi monkey", "Geoffroy's spider monkey", "common squirrel monkey", "ring-tailed lemur", "indri", "Asian elephant", "African bush elephant", "red panda", "giant panda", "snoek fish", "eel", "silver salmon", "rock beauty fish", "clownfish", "sturgeon", "gar fish", "lionfish", "pufferfish", "abacus", "abaya", "academic gown", "accordion", "acoustic guitar", "aircraft carrier", "airliner", "airship", "altar", "ambulance", "amphibious vehicle", "analog clock", "apiary", "apron", "trash can", "assault rifle", "backpack", "bakery", "balance beam", "balloon", "ballpoint pen", "Band-Aid", "banjo", "baluster / handrail", "barbell", "barber chair", "barbershop", "barn", "barometer", "barrel", "wheelbarrow", "baseball", "basketball", "bassinet", "bassoon", "swimming cap", "bath towel", "bathtub", "station wagon", "lighthouse", "beaker", "military hat (bearskin or shako)", "beer bottle", "beer glass", "bell tower", "baby bib", "tandem bicycle", "bikini", "ring binder", "binoculars", "birdhouse", "boathouse", "bobsleigh", "bolo tie", "poke bonnet", "bookcase", "bookstore", "bottle cap", "hunting bow", "bow tie", "brass memorial plaque", "bra", "breakwater", "breastplate", "broom", "bucket", "buckle", "bulletproof vest", "high-speed train", "butcher shop", "taxicab", "cauldron", "candle", "cannon", "canoe", "can opener", "cardigan", "car mirror", "carousel", "tool kit", "cardboard box / carton", "car wheel", "automated teller machine", "cassette", "cassette player", "castle", "catamaran", "CD player", "cello", "mobile phone", "chain", "chain-link fence", "chain mail", "chainsaw", "storage chest", "chiffonier", "bell or wind chime", "china cabinet", "Christmas stocking", "church", "movie theater", "cleaver", "cliff dwelling", "cloak", "clogs", "cocktail shaker", "coffee mug", "coffeemaker", "spiral or coil", "combination lock", "computer keyboard", "candy store", "container ship", "convertible", "corkscrew", "cornet", "cowboy boot", "cowboy hat", "cradle", "construction crane", "crash helmet", "crate", "infant bed", "Crock Pot", "croquet ball", "crutch", "cuirass", "dam", "desk", "desktop computer", "rotary dial telephone", "diaper", "digital clock", "digital watch", "dining table", "dishcloth", "dishwasher", "disc brake", "dock", "dog sled", "dome", "doormat", "drilling rig", "drum", "drumstick", "dumbbell", "Dutch oven", "electric fan", "electric guitar", "electric locomotive", "entertainment center", "envelope", "espresso machine", "face powder", "feather boa", "filing cabinet", "fireboat", "fire truck", "fire screen", "flagpole", "flute", "folding chair", "football helmet", "forklift", "fountain", "fountain pen", "four-poster bed", "freight car", "French horn", "frying pan", "fur coat", "garbage truck", "gas mask or respirator", "gas pump", "goblet", "go-kart", "golf ball", "golf cart", "gondola", "gong", "gown", "grand piano", "greenhouse", "radiator grille", "grocery store", "guillotine", "hair clip", "hair spray", "half-track", "hammer", "hamper", "hair dryer", "hand-held computer", "handkerchief", "hard disk drive", "harmonica", "harp", "combine harvester", "hatchet", "holster", "home theater", "honeycomb", "hook", "hoop skirt", "gymnastic horizontal bar", "horse-drawn vehicle", "hourglass", "iPod", "clothes iron", "carved pumpkin", "jeans", "jeep", "T-shirt", "jigsaw puzzle", "rickshaw", "joystick", "kimono", "knee pad", "knot", "lab coat", "ladle", "lampshade", "laptop computer", "lawn mower", "lens cap", "letter opener", "library", "lifeboat", "lighter", "limousine", "ocean liner", "lipstick", "slip-on shoe", "lotion", "music speaker", "loupe magnifying glass", "sawmill", "magnetic compass", "messenger bag", "mailbox", "tights", "one-piece bathing suit", "manhole cover", "maraca", "marimba", "mask", "matchstick", "maypole", "maze", "measuring cup", "medicine cabinet", "megalith", "microphone", "microwave oven", "military uniform", "milk can", "minibus", "miniskirt", "minivan", "missile", "mitten", "mixing bowl", "mobile home", "ford model t", "modem", "monastery", "monitor", "moped", "mortar and pestle", "graduation cap", "mosque", "mosquito net", "vespa", "mountain bike", "tent", "computer mouse", "mousetrap", "moving van", "muzzle", "metal nail", "neck brace", "necklace", "baby pacifier", "notebook computer", "obelisk", "oboe", "ocarina", "odometer", "oil filter", "pipe organ", "oscilloscope", "overskirt", "bullock cart", "oxygen mask", "product packet / packaging", "paddle", "paddle wheel", "padlock", "paintbrush", "pajamas", "palace", "pan flute", "paper towel", "parachute", "parallel bars", "park bench", "parking meter", "railroad car", "patio", "payphone", "pedestal", "pencil case", "pencil sharpener", "perfume", "Petri dish", "photocopier", "plectrum", "Pickelhaube", "picket fence", "pickup truck", "pier", "piggy bank", "pill bottle", "pillow", "ping-pong ball", "pinwheel", "pirate ship", "drink pitcher", "block plane", "planetarium", "plastic bag", "plate rack", "farm plow", "plunger", "Polaroid camera", "pole", "police van", "poncho", "pool table", "soda bottle", "plant pot", "potter's wheel", "power drill", "prayer rug", "printer", "prison", "missile", "projector", "hockey puck", "punching bag", "purse", "quill", "quilt", "race car", "racket", "radiator", "radio", "radio telescope", "rain barrel", "recreational vehicle", "fishing casting reel", "reflex camera", "refrigerator", "remote control", "restaurant", "revolver", "rifle", "rocking chair", "rotisserie", "eraser", "rugby ball", "ruler measuring stick", "sneaker", "safe", "safety pin", "salt shaker", "sandal", "sarong", "saxophone", "scabbard", "weighing scale", "school bus", "schooner", "scoreboard", "CRT monitor", "screw", "screwdriver", "seat belt", "sewing machine", "shield", "shoe store", "shoji screen / room divider", "shopping basket", "shopping cart", "shovel", "shower cap", "shower curtain", "ski", "balaclava ski mask", "sleeping bag", "slide rule", "sliding door", "slot machine", "snorkel", "snowmobile", "snowplow", "soap dispenser", "soccer ball", "sock", "solar thermal collector", "sombrero", "soup bowl", "keyboard space bar", "space heater", "space shuttle", "spatula", "motorboat", "spider web", "spindle", "sports car", "spotlight", "stage", "steam locomotive", "through arch bridge", "steel drum", "stethoscope", "scarf", "stone wall", "stopwatch", "stove", "strainer", "tram", "stretcher", "couch", "stupa", "submarine", "suit", "sundial", "sunglasses", "sunglasses", "sunscreen", "suspension bridge", "mop", "sweatshirt", "swim trunks / shorts", "swing", "electrical switch", "syringe", "table lamp", "tank", "tape player", "teapot", "teddy bear", "television", "tennis ball", "thatched roof", "front curtain", "thimble", "threshing machine", "throne", "tile roof", "toaster", "tobacco shop", "toilet seat", "torch", "totem pole", "tow truck", "toy store", "tractor", "semi-trailer truck", "tray", "trench coat", "tricycle", "trimaran", "tripod", "triumphal arch", "trolleybus", "trombone", "hot tub", "turnstile", "typewriter keyboard", "umbrella", "unicycle", "upright piano", "vacuum cleaner", "vase", "vaulted or arched ceiling", "velvet fabric", "vending machine", "vestment", "viaduct", "violin", "volleyball", "waffle iron", "wall clock", "wallet", "wardrobe", "military aircraft", "sink", "washing machine", "water bottle", "water jug", "water tower", "whiskey jug", "whistle", "hair wig", "window screen", "window shade", "Windsor tie", "wine bottle", "airplane wing", "wok", "wooden spoon", "wool", "split-rail fence", "shipwreck", "sailboat", "yurt", "website", "comic book", "crossword", "traffic or street sign", "traffic light", "dust jacket", "menu", "plate", "guacamole", "consomme", "hot pot", "trifle", "ice cream", "popsicle", "baguette", "bagel", "pretzel", "cheeseburger", "hot dog", "mashed potatoes", "cabbage", "broccoli", "cauliflower", "zucchini", "spaghetti squash", "acorn squash", "butternut squash", "cucumber", "artichoke", "bell pepper", "cardoon", "mushroom", "Granny Smith apple", "strawberry", "orange", "lemon", "fig", "pineapple", "banana", "jackfruit", "cherimoya (custard apple)", "pomegranate", "hay", "carbonara", "chocolate syrup", "dough", "meatloaf", "pizza", "pot pie", "burrito", "red wine", "espresso", "tea cup", "eggnog", "mountain", "bubble", "cliff", "coral reef", "geyser", "lakeshore", "promontory", "sandbar", "beach", "valley", "volcano", "baseball player", "bridegroom", "scuba diver", "rapeseed", "daisy", "yellow lady's slipper", "corn", "acorn", "rose hip", "horse chestnut seed", "coral fungus", "agaric", "gyromitra", "stinkhorn mushroom", "earth star fungus", "hen of the woods mushroom", "bolete", "corn cob", "toilet paper"]
# main_languages = ['EN'] + sorted(["WUU", "NV", "CV", "DIQ", "CHR", "CE", "HAK", "NAH", 'NE', 'ID', 'DE', 'NL', 'AF', 'HE', 'SQ', 'UZ', 'KN', 'KU', 'TA', 'LV', 'KO', 'UG', 'BR', 'EL', 'SU', 'KK', 'SK', 'GL', 'OM', 'FA', 'JV', 'CS', 'LO', 'HY', 'XH', 'HR', 'SO', 'GU', 'AM', 'AR', 'SA', 'CA', 'IS', 'IT', 'SV', 'GA', 'BG', 'VI', 'SD', 'UR', 'KM', 'PL', 'HU', 'SR', 'FR', 'HI', 'FY', 'ET', 'BS', 'SW', 'AZ', 'MK', 'ES', 'MN', 'JA', 'TL', 'TR', 'GD', 'RO', 'MG', 'MR', 'SL', 'PT', 'LT', 'NO', 'YI', 'UK', 'KY', 'KA', 'BN', 'OR', 'MY', 'PS', 'FI', 'ZH', 'DA', 'ML', 'BE', 'EO', 'HA', 'EU', 'AS', 'TE', 'TH', 'CY', 'SI', 'RU', 'LA', 'PA', 'MS'])
language_names = json.load(open("data/language_mapping.json", encoding="utf-8"))
main_language_values = sorted([[name, code] for code, name in language_names.items()], key=lambda x: x[0])
# [[main_language_names[lang], lang] for lang in main_languages+sorted(l for l in main_language_names if l not in main_languages)]

babel_imagenet = json.load(open("data/babel_imagenet-298.json", encoding="utf-8"))
babelnet_images = json.load(open("data/images.json", encoding="utf-8"))
no_image_idxs = [i for i, imgs in enumerate(babelnet_images) if len(imgs) == 0]
IMG_HEIGHT, IMG_WIDTH = 512, 512

precomputed_results = None
if os.path.exists("data/precomputed_results.json"):
    precomputed_results = json.load(open("data/precomputed_results.json"))

request_header = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36'}
### Loading model; hard-coded to mSigLIP for now.

if not precomputed_results:
    open_clip_model, open_clip_pretrained = "ViT-B-16-SigLIP-i18n-256", "webli"
    model, _, transform = open_clip.create_model_and_transforms(open_clip_model, pretrained=open_clip_pretrained)
    tokenizer = open_clip.get_tokenizer(open_clip_model)

    device = "cuda" if torch.cuda.is_available() else "cpu"
    model = model.to(device)

def change_language(lang, randomize_imgs, randomize_labels):
    # compute text embeddings
    labels = babel_imagenet[lang][1]
    class_order = list(range(len(labels)))
    if randomize_labels:
        np.random.shuffle(class_order)
    ### We use no prompt ensembling for now
    if not precomputed_results:
        text_tokens = tokenizer(labels).to(device)
        with torch.no_grad():
            text_features = model.encode_text(text_tokens).float()
            text_features /= text_features.norm(dim=-1, keepdim=True)
            text_features = text_features.cpu().numpy()
    else:
        text_features = None
    correct_text = gr.Text(f"Correct was: ''. Question 1/{len(babel_imagenet[lang][0])} ", label="Game")
    player_score_text = gr.Text(f"Your choice: (Score: 0) ", label="Player")
    clip_score_text = gr.Text(f"CLIP chose: '' (Score: 0)", label="CLIP")

    return text_features, -1, class_order, correct_text, player_score_text, clip_score_text, 0, 0

def select(idx, lang, choice, correct, model_choice, player_score, clip_score):
    # checks if answer choice is correct and updated scores
    correct_name, correct_value = correct
    model_choice_name, model_choice_value = model_choice

    player_correct = choice == correct_value
    model_correct = model_choice_value == correct_value

    player_score = player_score + int(player_correct)
    clip_score = clip_score + int(model_correct)

    correct_text = gr.Text(f"Correct was: '{correct_name}'. Question {idx+1}/{len(babel_imagenet[lang][0])} ", label="Game")
    player_score_text = gr.Text(f"Your choice: {'✅' if player_correct else '❌'} (Score: {player_score}) ", label="Player")
    clip_score_text = gr.Text(f"CLIP chose: '{model_choice_name}' {'✅' if model_correct else '❌'} (Score: {clip_score})", label="CLIP")

    return correct_text, player_score_text, clip_score_text, player_score, clip_score

def prepare(raw_idx, lang, text_embeddings, class_order, randomize_images):
    #  prepared next question, loads image, and computes choices

    raw_idx = (raw_idx+1) % len(babel_imagenet[lang][0])
    idx = class_order[raw_idx]
    lang_class_idxs = babel_imagenet[lang][0]
    class_idx = lang_class_idxs[idx]

    # skip classes with no images
    while class_idx in no_image_idxs:
        raw_idx = (raw_idx + 1) % len(babel_imagenet[lang][0])
        idx = class_order[raw_idx]
        lang_class_idxs = babel_imagenet[lang][0] if lang != "EN" else list(range(1000))
        class_idx = lang_class_idxs[idx]

    img_idx = 0
    if randomize_images:
        img_idx = np.random.choice(len(babelnet_images[class_idx]))
    img_url = babelnet_images[class_idx][img_idx]["url"]
    class_labels = babel_imagenet[lang][1] if lang != "EN" else openai_en_classes

    if not precomputed_results:
        try:
            image_input = transform(Image.open(requests.get(img_url, stream=True, headers=request_header).raw).convert("RGB")).unsqueeze(0).to(device)
            with torch.no_grad():
                image_features = model.encode_image(image_input).float()
                image_features /= image_features.norm(dim=-1, keepdim=True)
        except:
            gr.Warning("There is a problem with the next class. Skipping it.")
            return prepare(raw_idx, lang, text_embeddings, class_order, randomize_images)

        similarity = (text_embeddings @ image_features.cpu().numpy().T).squeeze()
        choices = np.argsort(similarity)[-4:].tolist()
    else:
        choices = list(reversed(precomputed_results[lang][idx][img_idx]))  # precomputing script uses torch.topk which sorts in reverse here
    if idx not in choices:
        choices = [idx] + choices[1:]
    model_choice_idx = choices[-1]

    numpy.random.shuffle(choices)

    choice_names = [class_labels[idx] for idx in choices]
    choice_values = [0, 1, 2, 3]

    model_choice_idx = choices.index(model_choice_idx)
    model_choice = [choice_names[model_choice_idx], choice_values[model_choice_idx]]
    correct_choice_idx = choices.index(idx)
    correct_choice = [choice_names[correct_choice_idx], choice_values[correct_choice_idx]]

    choice_values = list(zip(choice_names, choice_values))

    next_radio = gr.Radio(choices=choice_values, interactive=True, label="Select the correct answer:", value=None)
    next_image = gr.Image(value=img_url, width=IMG_WIDTH, height=IMG_WIDTH, label="What class does this image belong to?")

    return next_radio, next_image, raw_idx, correct_choice, model_choice



with (gr.Blocks(title="Babel-ImageNet Quiz") as demo):

    # setup state
    class_idx = gr.State(-1)
    player_score = gr.State(0)
    clip_score = gr.State(0)
    class_order = gr.State([])

    text_embeddings = gr.State(None)
    correct_choice = gr.State(["nan", 0]) # 0, 1, 2, 3
    model_choice = gr.State(["nan", 0])

    # Title Area
    gr.Markdown("""
# Are you smarter🤓 than CLIP🤖? Take the [ Babel-ImageNet ](https://arxiv.org/abs/2306.08658)  Quiz!

<small>by Gregor Geigle, WüNLP & Computer Vision Lab, University of Würzburg</small>

In this quiz, you play against a CLIP model and try to correctly classify the images over the 1000 ImageNet classes (in English) or over our (partial) Babel-ImageNet translations of those classes.   
Select your language, click 'Start' and start guessing! We'll keep track of your score and of your opponent's.   
> **Disclaimer:** Translations and images are derived automatically and can be wrong, unusual, or mismatch! This is supposed to be a fun game to explore the dataset and see how a CLIP model would answer the questions and not a product.   
> We do *not* use the official ImageNet images. Instead, we use images linked in BabelNet for each class, which are often from Wikipedia and have not been checked for suitability.   

> **Content Warning:** There are spiders, insects, and various animals under the images. Please take caution if those might scare you.   

<details>
<summary> <b> FAQ</b> (click me to read)</summary>
<p><b>'Over 1000 classes? I just see 4.'</b> True, you have it easier and you only have to chose between 4 classes. These are the top-4 picks of your opponent (+ the correct class if they are wrong). Your opponent has it harder: they have to deal with all classes.</p>   
<p><b>'Who is my opponent?'</b> Your opponent CLIP model is [mSigLIP](https://huggingface.co/timm/ViT-B-16-SigLIP-i18n-256), a powerful but small multilingual model with only 370M parameters.</p>      
<p><b>'My game crashed/ I got an error!'</b> This usually happens because of problems with the image URLs. Unfortunately, there is nothing you can do except start a new round by clicking the 'Start' button.</p>      
</details>
        """)
    with gr.Row():
        with gr.Column(scale=1):
            gr.Markdown("""
            <details>
            <summary> <b>What is CLIP? </b> (click me to read)</summary>
            <p>
            <a href='https://arxiv.org/abs/2103.00020'>CLIP</a> are vision-language models that learn to encode images and text in a joint semantic embedding space, where related concepts are close together.
            With CLIP, you can search through, filter, or group large image datasets. The image encoder in CLIP also powers many of the large vision language models like Llava 1.5!
            </p>   
            <p>
            Your opponent CLIP model in this quiz does 'zero-shot image classification': We encode all possible class labels and the image and we check which class is most similar; this is then the class chosen by CLIP.
            </p> 
            </details>
                    """)
        with gr.Column(scale=1):
            gr.Markdown("""
            <details>
            <summary> <b>What is ImageNet? </b> (click me to read)</summary>
            <p>
            ImageNet is a challenging image classification dataset with 1000 diverse classes covering animals, plants, human-made objects and more.
            It is a very popular dataset used to benchmark CLIP models because strong results here usually indicates that the image model is overall usefull for many tasks.
            </p>   
            </details>
                    """)
        with gr.Column(scale=1):
            gr.Markdown("""
            <details>
            <summary> <b>What is Babel-ImageNet? </b> (click me to read)</summary>
            <p>
            ImageNet class labels are only in English but we want to use CLIP models also in other languages. How can we know how good a CLIP model is outside of English?
            This is the goal of Babel-ImageNet: to translate the English labels to other languages. However, automatic translation can give bad results for many languages and human translation is expensive.
            </p>   
            <p>
            Instead, we use the fact that ImageNet was constructed using WordNet and WordNet in turn can be linked to the multilingual resource BabelNet.
            Using this link, we can get reliable (partial) translations of the English labels.
            For more details, please read our <a href='https://arxiv.org/abs/2306.08658'>paper.</a>
            </p> 
            </details>
                    """)
    # language select dropdown
    with gr.Row():
        language_select = gr.Dropdown(choices=main_language_values, value="EN", interactive=True, label="Select your language:")
        randomize_classes = gr.Checkbox(label="Randomize class order (or play in canonic order)")
        randomize_images = gr.Checkbox(label="Randomize images (if unchecked, will always show the same image). Other images might be less relevant.")
        start_btn = gr.Button(value="Start", variant="primary")

    # quiz area
    with gr.Row():
        with gr.Column(scale=1):
            image = gr.Image(value="data/bin_image.png",
                             width=IMG_WIDTH, height=IMG_WIDTH)

        with gr.Column(scale=1):
            options = gr.Radio(choices=["Click", "start", "to", "begin"], interactive=False, label="Please click start to begin.")
            # with gr.Row():
            correct_text = gr.Text("Please click start to begin.")
            player_score_text = gr.Text(f"Player score: 0")
            clip_score_text = gr.Text(f"CLIP score: 0")


    # Explanation area



    options.select(fn=select,
                   inputs=[class_idx, language_select, options, correct_choice, model_choice, player_score, clip_score],
                   outputs=[correct_text, player_score_text, clip_score_text, player_score, clip_score]
                   ).then(fn=prepare,
                          inputs=[class_idx, language_select, text_embeddings, class_order, randomize_images],
                          outputs=[options, image, class_idx, correct_choice, model_choice])

    start_btn.click(fn=change_language,
                          inputs=[language_select, randomize_images, randomize_classes],
                          outputs=[text_embeddings, class_idx, class_order, correct_text, player_score_text, clip_score_text, player_score, clip_score]
                          ).then(fn=prepare,
                                 inputs=[class_idx, language_select, text_embeddings, class_order, randomize_images],
                                 outputs=[options, image, class_idx, correct_choice, model_choice])

    # initialization
    # demo.load(fn=change_language,
    #           inputs=[language_select],
    #           outputs=[text_embeddings, class_idx, correct_text, player_score_text, clip_score_text, player_score, clip_score]
    #           ).then(fn=prepare,
    #                  inputs=[class_idx, language_select, text_embeddings],
    #                  outputs=[options, image, class_idx, correct_choice, model_choice])



demo.launch()