Theme base 2 (#2840)

* add theme + theme atoms

* audio

* buttons

* chatbot

* forms

* start file

* complete file

* fixup workbench

* gallery

* highlighted text

* label

* json

* upload

* 3d model

* atoms

* chart

* md + html

* image

* plot + build

* table

* tabs

* tooltip

* upload

* tweaks

* tweaks + more tooling

* tweaks to padding/ lineheight

* app components _ start api docs

* format, more api docs

* finish api docs

* interpretation

* todos

* tweaks + cleanup

* tweaks + cleanup

* revert range tweaks

* fix notebooks

* fix test

* remove tw

* cleanup + login

* fix gitignore

* fix types

* run css script

* fix progress + tweaks

* update demos

* add css build to static check workflow

* tweak ci

* fix tests

* tweak markdown

* tweak chatbot + file

* fix tabs

* tweak tabs

* cleanup

* fix api docs

* fix example gallery

* add gradient to toast

* fix min height for interfaces

* revert tab changes

* update notebooks

* fix generating status animation

* fix weird table scrollbar that only appears on freddy's computer

* format

* fix dataset in gallery mode

* cleanup

* fix notebooks

* tweaks

* fix notebooks

* change

Co-authored-by: Ali Abid <aabid94@gmail.com>

.github/workflows/ui.yml

@@ -37,6 +37,8 @@ jobs:
         run: pnpm i --frozen-lockfile
       - name: formatting check
         run: pnpm format:check
+      - name: build css
+        run: pnpm css
       - name: typecheck
         run: pnpm ts:check
       - name: unit tests

.gitignore

@@ -7,6 +7,7 @@ __pycache__/
 *.py[cod]
 *$py.class
 build/
+__tmp/*
 
 # JS build
 gradio/templates/cdn

.vscode/settings.json

@@ -1,3 +1,13 @@
 {
-    "python.formatting.provider": "black"
+    "python.formatting.provider": "black",
+    "cssvar.files": [
+    // Or your custom Pollen bundle
+    "./ui/node_modules/pollen-css/pollen.css",
+    ],
+    // Do not ignore css files in node_modules, which is ignored by default
+    "cssvar.ignore": [],
+    // Use Pollen's inbuilt variable ordering
+    "cssvar.disableSort": true,
+    // Add support for autocomplete in other file types
+    "cssvar.extensions": ["js", "css", "html", "jsx", "tsx", "svelte"]
 }

CHANGELOG.md

@@ -19,7 +19,7 @@ No changes to highlight.
 No changes to highlight.
 
 ## Full Changelog:
-No changes to highlight.
+* Rewrote frontend using CSS variables for themes by [@pngwn](https://github.com/pngwn) in [PR 2840](https://github.com/gradio-app/gradio/pull/2840)
 
 ## Contributors Shoutout:
 No changes to highlight.

demo/dataset/files/time.csv

@@ -0,0 +1,8 @@
+time,value,price
+1,1,4
+2,3,8
+3,6,12
+4,10,16
+5,15,20
+6,21,24
+7,28,28

demo/dataset/files/titanic.csv

@@ -0,0 +1,892 @@
+PassengerId,Survived,Pclass,Name,Sex,Age,SibSp,Parch,Ticket,Fare,Cabin,Embarked
+1,0,3,"Braund, Mr. Owen Harris",male,22,1,0,A/5 21171,7.25,,S
+2,1,1,"Cumings, Mrs. John Bradley (Florence Briggs Thayer)",female,38,1,0,PC 17599,71.2833,C85,C
+3,1,3,"Heikkinen, Miss. Laina",female,26,0,0,STON/O2. 3101282,7.925,,S
+4,1,1,"Futrelle, Mrs. Jacques Heath (Lily May Peel)",female,35,1,0,113803,53.1,C123,S
+5,0,3,"Allen, Mr. William Henry",male,35,0,0,373450,8.05,,S
+6,0,3,"Moran, Mr. James",male,,0,0,330877,8.4583,,Q
+7,0,1,"McCarthy, Mr. Timothy J",male,54,0,0,17463,51.8625,E46,S
+8,0,3,"Palsson, Master. Gosta Leonard",male,2,3,1,349909,21.075,,S
+9,1,3,"Johnson, Mrs. Oscar W (Elisabeth Vilhelmina Berg)",female,27,0,2,347742,11.1333,,S
+10,1,2,"Nasser, Mrs. Nicholas (Adele Achem)",female,14,1,0,237736,30.0708,,C
+11,1,3,"Sandstrom, Miss. Marguerite Rut",female,4,1,1,PP 9549,16.7,G6,S
+12,1,1,"Bonnell, Miss. Elizabeth",female,58,0,0,113783,26.55,C103,S
+13,0,3,"Saundercock, Mr. William Henry",male,20,0,0,A/5. 2151,8.05,,S
+14,0,3,"Andersson, Mr. Anders Johan",male,39,1,5,347082,31.275,,S
+15,0,3,"Vestrom, Miss. Hulda Amanda Adolfina",female,14,0,0,350406,7.8542,,S
+16,1,2,"Hewlett, Mrs. (Mary D Kingcome) ",female,55,0,0,248706,16,,S
+17,0,3,"Rice, Master. Eugene",male,2,4,1,382652,29.125,,Q
+18,1,2,"Williams, Mr. Charles Eugene",male,,0,0,244373,13,,S
+19,0,3,"Vander Planke, Mrs. Julius (Emelia Maria Vandemoortele)",female,31,1,0,345763,18,,S
+20,1,3,"Masselmani, Mrs. Fatima",female,,0,0,2649,7.225,,C
+21,0,2,"Fynney, Mr. Joseph J",male,35,0,0,239865,26,,S
+22,1,2,"Beesley, Mr. Lawrence",male,34,0,0,248698,13,D56,S
+23,1,3,"McGowan, Miss. Anna ""Annie""",female,15,0,0,330923,8.0292,,Q
+24,1,1,"Sloper, Mr. William Thompson",male,28,0,0,113788,35.5,A6,S
+25,0,3,"Palsson, Miss. Torborg Danira",female,8,3,1,349909,21.075,,S
+26,1,3,"Asplund, Mrs. Carl Oscar (Selma Augusta Emilia Johansson)",female,38,1,5,347077,31.3875,,S
+27,0,3,"Emir, Mr. Farred Chehab",male,,0,0,2631,7.225,,C
+28,0,1,"Fortune, Mr. Charles Alexander",male,19,3,2,19950,263,C23 C25 C27,S
+29,1,3,"O'Dwyer, Miss. Ellen ""Nellie""",female,,0,0,330959,7.8792,,Q
+30,0,3,"Todoroff, Mr. Lalio",male,,0,0,349216,7.8958,,S
+31,0,1,"Uruchurtu, Don. Manuel E",male,40,0,0,PC 17601,27.7208,,C
+32,1,1,"Spencer, Mrs. William Augustus (Marie Eugenie)",female,,1,0,PC 17569,146.5208,B78,C
+33,1,3,"Glynn, Miss. Mary Agatha",female,,0,0,335677,7.75,,Q
+34,0,2,"Wheadon, Mr. Edward H",male,66,0,0,C.A. 24579,10.5,,S
+35,0,1,"Meyer, Mr. Edgar Joseph",male,28,1,0,PC 17604,82.1708,,C
+36,0,1,"Holverson, Mr. Alexander Oskar",male,42,1,0,113789,52,,S
+37,1,3,"Mamee, Mr. Hanna",male,,0,0,2677,7.2292,,C
+38,0,3,"Cann, Mr. Ernest Charles",male,21,0,0,A./5. 2152,8.05,,S
+39,0,3,"Vander Planke, Miss. Augusta Maria",female,18,2,0,345764,18,,S
+40,1,3,"Nicola-Yarred, Miss. Jamila",female,14,1,0,2651,11.2417,,C
+41,0,3,"Ahlin, Mrs. Johan (Johanna Persdotter Larsson)",female,40,1,0,7546,9.475,,S
+42,0,2,"Turpin, Mrs. William John Robert (Dorothy Ann Wonnacott)",female,27,1,0,11668,21,,S
+43,0,3,"Kraeff, Mr. Theodor",male,,0,0,349253,7.8958,,C
+44,1,2,"Laroche, Miss. Simonne Marie Anne Andree",female,3,1,2,SC/Paris 2123,41.5792,,C
+45,1,3,"Devaney, Miss. Margaret Delia",female,19,0,0,330958,7.8792,,Q
+46,0,3,"Rogers, Mr. William John",male,,0,0,S.C./A.4. 23567,8.05,,S
+47,0,3,"Lennon, Mr. Denis",male,,1,0,370371,15.5,,Q
+48,1,3,"O'Driscoll, Miss. Bridget",female,,0,0,14311,7.75,,Q
+49,0,3,"Samaan, Mr. Youssef",male,,2,0,2662,21.6792,,C
+50,0,3,"Arnold-Franchi, Mrs. Josef (Josefine Franchi)",female,18,1,0,349237,17.8,,S
+51,0,3,"Panula, Master. Juha Niilo",male,7,4,1,3101295,39.6875,,S
+52,0,3,"Nosworthy, Mr. Richard Cater",male,21,0,0,A/4. 39886,7.8,,S
+53,1,1,"Harper, Mrs. Henry Sleeper (Myna Haxtun)",female,49,1,0,PC 17572,76.7292,D33,C
+54,1,2,"Faunthorpe, Mrs. Lizzie (Elizabeth Anne Wilkinson)",female,29,1,0,2926,26,,S
+55,0,1,"Ostby, Mr. Engelhart Cornelius",male,65,0,1,113509,61.9792,B30,C
+56,1,1,"Woolner, Mr. Hugh",male,,0,0,19947,35.5,C52,S
+57,1,2,"Rugg, Miss. Emily",female,21,0,0,C.A. 31026,10.5,,S
+58,0,3,"Novel, Mr. Mansouer",male,28.5,0,0,2697,7.2292,,C
+59,1,2,"West, Miss. Constance Mirium",female,5,1,2,C.A. 34651,27.75,,S
+60,0,3,"Goodwin, Master. William Frederick",male,11,5,2,CA 2144,46.9,,S
+61,0,3,"Sirayanian, Mr. Orsen",male,22,0,0,2669,7.2292,,C
+62,1,1,"Icard, Miss. Amelie",female,38,0,0,113572,80,B28,
+63,0,1,"Harris, Mr. Henry Birkhardt",male,45,1,0,36973,83.475,C83,S
+64,0,3,"Skoog, Master. Harald",male,4,3,2,347088,27.9,,S
+65,0,1,"Stewart, Mr. Albert A",male,,0,0,PC 17605,27.7208,,C
+66,1,3,"Moubarek, Master. Gerios",male,,1,1,2661,15.2458,,C
+67,1,2,"Nye, Mrs. (Elizabeth Ramell)",female,29,0,0,C.A. 29395,10.5,F33,S
+68,0,3,"Crease, Mr. Ernest James",male,19,0,0,S.P. 3464,8.1583,,S
+69,1,3,"Andersson, Miss. Erna Alexandra",female,17,4,2,3101281,7.925,,S
+70,0,3,"Kink, Mr. Vincenz",male,26,2,0,315151,8.6625,,S
+71,0,2,"Jenkin, Mr. Stephen Curnow",male,32,0,0,C.A. 33111,10.5,,S
+72,0,3,"Goodwin, Miss. Lillian Amy",female,16,5,2,CA 2144,46.9,,S
+73,0,2,"Hood, Mr. Ambrose Jr",male,21,0,0,S.O.C. 14879,73.5,,S
+74,0,3,"Chronopoulos, Mr. Apostolos",male,26,1,0,2680,14.4542,,C
+75,1,3,"Bing, Mr. Lee",male,32,0,0,1601,56.4958,,S
+76,0,3,"Moen, Mr. Sigurd Hansen",male,25,0,0,348123,7.65,F G73,S
+77,0,3,"Staneff, Mr. Ivan",male,,0,0,349208,7.8958,,S
+78,0,3,"Moutal, Mr. Rahamin Haim",male,,0,0,374746,8.05,,S
+79,1,2,"Caldwell, Master. Alden Gates",male,0.83,0,2,248738,29,,S
+80,1,3,"Dowdell, Miss. Elizabeth",female,30,0,0,364516,12.475,,S
+81,0,3,"Waelens, Mr. Achille",male,22,0,0,345767,9,,S
+82,1,3,"Sheerlinck, Mr. Jan Baptist",male,29,0,0,345779,9.5,,S
+83,1,3,"McDermott, Miss. Brigdet Delia",female,,0,0,330932,7.7875,,Q
+84,0,1,"Carrau, Mr. Francisco M",male,28,0,0,113059,47.1,,S
+85,1,2,"Ilett, Miss. Bertha",female,17,0,0,SO/C 14885,10.5,,S
+86,1,3,"Backstrom, Mrs. Karl Alfred (Maria Mathilda Gustafsson)",female,33,3,0,3101278,15.85,,S
+87,0,3,"Ford, Mr. William Neal",male,16,1,3,W./C. 6608,34.375,,S
+88,0,3,"Slocovski, Mr. Selman Francis",male,,0,0,SOTON/OQ 392086,8.05,,S
+89,1,1,"Fortune, Miss. Mabel Helen",female,23,3,2,19950,263,C23 C25 C27,S
+90,0,3,"Celotti, Mr. Francesco",male,24,0,0,343275,8.05,,S
+91,0,3,"Christmann, Mr. Emil",male,29,0,0,343276,8.05,,S
+92,0,3,"Andreasson, Mr. Paul Edvin",male,20,0,0,347466,7.8542,,S
+93,0,1,"Chaffee, Mr. Herbert Fuller",male,46,1,0,W.E.P. 5734,61.175,E31,S
+94,0,3,"Dean, Mr. Bertram Frank",male,26,1,2,C.A. 2315,20.575,,S
+95,0,3,"Coxon, Mr. Daniel",male,59,0,0,364500,7.25,,S
+96,0,3,"Shorney, Mr. Charles Joseph",male,,0,0,374910,8.05,,S
+97,0,1,"Goldschmidt, Mr. George B",male,71,0,0,PC 17754,34.6542,A5,C
+98,1,1,"Greenfield, Mr. William Bertram",male,23,0,1,PC 17759,63.3583,D10 D12,C
+99,1,2,"Doling, Mrs. John T (Ada Julia Bone)",female,34,0,1,231919,23,,S
+100,0,2,"Kantor, Mr. Sinai",male,34,1,0,244367,26,,S
+101,0,3,"Petranec, Miss. Matilda",female,28,0,0,349245,7.8958,,S
+102,0,3,"Petroff, Mr. Pastcho (""Pentcho"")",male,,0,0,349215,7.8958,,S
+103,0,1,"White, Mr. Richard Frasar",male,21,0,1,35281,77.2875,D26,S
+104,0,3,"Johansson, Mr. Gustaf Joel",male,33,0,0,7540,8.6542,,S
+105,0,3,"Gustafsson, Mr. Anders Vilhelm",male,37,2,0,3101276,7.925,,S
+106,0,3,"Mionoff, Mr. Stoytcho",male,28,0,0,349207,7.8958,,S
+107,1,3,"Salkjelsvik, Miss. Anna Kristine",female,21,0,0,343120,7.65,,S
+108,1,3,"Moss, Mr. Albert Johan",male,,0,0,312991,7.775,,S
+109,0,3,"Rekic, Mr. Tido",male,38,0,0,349249,7.8958,,S
+110,1,3,"Moran, Miss. Bertha",female,,1,0,371110,24.15,,Q
+111,0,1,"Porter, Mr. Walter Chamberlain",male,47,0,0,110465,52,C110,S
+112,0,3,"Zabour, Miss. Hileni",female,14.5,1,0,2665,14.4542,,C
+113,0,3,"Barton, Mr. David John",male,22,0,0,324669,8.05,,S
+114,0,3,"Jussila, Miss. Katriina",female,20,1,0,4136,9.825,,S
+115,0,3,"Attalah, Miss. Malake",female,17,0,0,2627,14.4583,,C
+116,0,3,"Pekoniemi, Mr. Edvard",male,21,0,0,STON/O 2. 3101294,7.925,,S
+117,0,3,"Connors, Mr. Patrick",male,70.5,0,0,370369,7.75,,Q
+118,0,2,"Turpin, Mr. William John Robert",male,29,1,0,11668,21,,S
+119,0,1,"Baxter, Mr. Quigg Edmond",male,24,0,1,PC 17558,247.5208,B58 B60,C
+120,0,3,"Andersson, Miss. Ellis Anna Maria",female,2,4,2,347082,31.275,,S
+121,0,2,"Hickman, Mr. Stanley George",male,21,2,0,S.O.C. 14879,73.5,,S
+122,0,3,"Moore, Mr. Leonard Charles",male,,0,0,A4. 54510,8.05,,S
+123,0,2,"Nasser, Mr. Nicholas",male,32.5,1,0,237736,30.0708,,C
+124,1,2,"Webber, Miss. Susan",female,32.5,0,0,27267,13,E101,S
+125,0,1,"White, Mr. Percival Wayland",male,54,0,1,35281,77.2875,D26,S
+126,1,3,"Nicola-Yarred, Master. Elias",male,12,1,0,2651,11.2417,,C
+127,0,3,"McMahon, Mr. Martin",male,,0,0,370372,7.75,,Q
+128,1,3,"Madsen, Mr. Fridtjof Arne",male,24,0,0,C 17369,7.1417,,S
+129,1,3,"Peter, Miss. Anna",female,,1,1,2668,22.3583,F E69,C
+130,0,3,"Ekstrom, Mr. Johan",male,45,0,0,347061,6.975,,S
+131,0,3,"Drazenoic, Mr. Jozef",male,33,0,0,349241,7.8958,,C
+132,0,3,"Coelho, Mr. Domingos Fernandeo",male,20,0,0,SOTON/O.Q. 3101307,7.05,,S
+133,0,3,"Robins, Mrs. Alexander A (Grace Charity Laury)",female,47,1,0,A/5. 3337,14.5,,S
+134,1,2,"Weisz, Mrs. Leopold (Mathilde Francoise Pede)",female,29,1,0,228414,26,,S
+135,0,2,"Sobey, Mr. Samuel James Hayden",male,25,0,0,C.A. 29178,13,,S
+136,0,2,"Richard, Mr. Emile",male,23,0,0,SC/PARIS 2133,15.0458,,C
+137,1,1,"Newsom, Miss. Helen Monypeny",female,19,0,2,11752,26.2833,D47,S
+138,0,1,"Futrelle, Mr. Jacques Heath",male,37,1,0,113803,53.1,C123,S
+139,0,3,"Osen, Mr. Olaf Elon",male,16,0,0,7534,9.2167,,S
+140,0,1,"Giglio, Mr. Victor",male,24,0,0,PC 17593,79.2,B86,C
+141,0,3,"Boulos, Mrs. Joseph (Sultana)",female,,0,2,2678,15.2458,,C
+142,1,3,"Nysten, Miss. Anna Sofia",female,22,0,0,347081,7.75,,S
+143,1,3,"Hakkarainen, Mrs. Pekka Pietari (Elin Matilda Dolck)",female,24,1,0,STON/O2. 3101279,15.85,,S
+144,0,3,"Burke, Mr. Jeremiah",male,19,0,0,365222,6.75,,Q
+145,0,2,"Andrew, Mr. Edgardo Samuel",male,18,0,0,231945,11.5,,S
+146,0,2,"Nicholls, Mr. Joseph Charles",male,19,1,1,C.A. 33112,36.75,,S
+147,1,3,"Andersson, Mr. August Edvard (""Wennerstrom"")",male,27,0,0,350043,7.7958,,S
+148,0,3,"Ford, Miss. Robina Maggie ""Ruby""",female,9,2,2,W./C. 6608,34.375,,S
+149,0,2,"Navratil, Mr. Michel (""Louis M Hoffman"")",male,36.5,0,2,230080,26,F2,S
+150,0,2,"Byles, Rev. Thomas Roussel Davids",male,42,0,0,244310,13,,S
+151,0,2,"Bateman, Rev. Robert James",male,51,0,0,S.O.P. 1166,12.525,,S
+152,1,1,"Pears, Mrs. Thomas (Edith Wearne)",female,22,1,0,113776,66.6,C2,S
+153,0,3,"Meo, Mr. Alfonzo",male,55.5,0,0,A.5. 11206,8.05,,S
+154,0,3,"van Billiard, Mr. Austin Blyler",male,40.5,0,2,A/5. 851,14.5,,S
+155,0,3,"Olsen, Mr. Ole Martin",male,,0,0,Fa 265302,7.3125,,S
+156,0,1,"Williams, Mr. Charles Duane",male,51,0,1,PC 17597,61.3792,,C
+157,1,3,"Gilnagh, Miss. Katherine ""Katie""",female,16,0,0,35851,7.7333,,Q
+158,0,3,"Corn, Mr. Harry",male,30,0,0,SOTON/OQ 392090,8.05,,S
+159,0,3,"Smiljanic, Mr. Mile",male,,0,0,315037,8.6625,,S
+160,0,3,"Sage, Master. Thomas Henry",male,,8,2,CA. 2343,69.55,,S
+161,0,3,"Cribb, Mr. John Hatfield",male,44,0,1,371362,16.1,,S
+162,1,2,"Watt, Mrs. James (Elizabeth ""Bessie"" Inglis Milne)",female,40,0,0,C.A. 33595,15.75,,S
+163,0,3,"Bengtsson, Mr. John Viktor",male,26,0,0,347068,7.775,,S
+164,0,3,"Calic, Mr. Jovo",male,17,0,0,315093,8.6625,,S
+165,0,3,"Panula, Master. Eino Viljami",male,1,4,1,3101295,39.6875,,S
+166,1,3,"Goldsmith, Master. Frank John William ""Frankie""",male,9,0,2,363291,20.525,,S
+167,1,1,"Chibnall, Mrs. (Edith Martha Bowerman)",female,,0,1,113505,55,E33,S
+168,0,3,"Skoog, Mrs. William (Anna Bernhardina Karlsson)",female,45,1,4,347088,27.9,,S
+169,0,1,"Baumann, Mr. John D",male,,0,0,PC 17318,25.925,,S
+170,0,3,"Ling, Mr. Lee",male,28,0,0,1601,56.4958,,S
+171,0,1,"Van der hoef, Mr. Wyckoff",male,61,0,0,111240,33.5,B19,S
+172,0,3,"Rice, Master. Arthur",male,4,4,1,382652,29.125,,Q
+173,1,3,"Johnson, Miss. Eleanor Ileen",female,1,1,1,347742,11.1333,,S
+174,0,3,"Sivola, Mr. Antti Wilhelm",male,21,0,0,STON/O 2. 3101280,7.925,,S
+175,0,1,"Smith, Mr. James Clinch",male,56,0,0,17764,30.6958,A7,C
+176,0,3,"Klasen, Mr. Klas Albin",male,18,1,1,350404,7.8542,,S
+177,0,3,"Lefebre, Master. Henry Forbes",male,,3,1,4133,25.4667,,S
+178,0,1,"Isham, Miss. Ann Elizabeth",female,50,0,0,PC 17595,28.7125,C49,C
+179,0,2,"Hale, Mr. Reginald",male,30,0,0,250653,13,,S
+180,0,3,"Leonard, Mr. Lionel",male,36,0,0,LINE,0,,S
+181,0,3,"Sage, Miss. Constance Gladys",female,,8,2,CA. 2343,69.55,,S
+182,0,2,"Pernot, Mr. Rene",male,,0,0,SC/PARIS 2131,15.05,,C
+183,0,3,"Asplund, Master. Clarence Gustaf Hugo",male,9,4,2,347077,31.3875,,S
+184,1,2,"Becker, Master. Richard F",male,1,2,1,230136,39,F4,S
+185,1,3,"Kink-Heilmann, Miss. Luise Gretchen",female,4,0,2,315153,22.025,,S
+186,0,1,"Rood, Mr. Hugh Roscoe",male,,0,0,113767,50,A32,S
+187,1,3,"O'Brien, Mrs. Thomas (Johanna ""Hannah"" Godfrey)",female,,1,0,370365,15.5,,Q
+188,1,1,"Romaine, Mr. Charles Hallace (""Mr C Rolmane"")",male,45,0,0,111428,26.55,,S
+189,0,3,"Bourke, Mr. John",male,40,1,1,364849,15.5,,Q
+190,0,3,"Turcin, Mr. Stjepan",male,36,0,0,349247,7.8958,,S
+191,1,2,"Pinsky, Mrs. (Rosa)",female,32,0,0,234604,13,,S
+192,0,2,"Carbines, Mr. William",male,19,0,0,28424,13,,S
+193,1,3,"Andersen-Jensen, Miss. Carla Christine Nielsine",female,19,1,0,350046,7.8542,,S
+194,1,2,"Navratil, Master. Michel M",male,3,1,1,230080,26,F2,S
+195,1,1,"Brown, Mrs. James Joseph (Margaret Tobin)",female,44,0,0,PC 17610,27.7208,B4,C
+196,1,1,"Lurette, Miss. Elise",female,58,0,0,PC 17569,146.5208,B80,C
+197,0,3,"Mernagh, Mr. Robert",male,,0,0,368703,7.75,,Q
+198,0,3,"Olsen, Mr. Karl Siegwart Andreas",male,42,0,1,4579,8.4042,,S
+199,1,3,"Madigan, Miss. Margaret ""Maggie""",female,,0,0,370370,7.75,,Q
+200,0,2,"Yrois, Miss. Henriette (""Mrs Harbeck"")",female,24,0,0,248747,13,,S
+201,0,3,"Vande Walle, Mr. Nestor Cyriel",male,28,0,0,345770,9.5,,S
+202,0,3,"Sage, Mr. Frederick",male,,8,2,CA. 2343,69.55,,S
+203,0,3,"Johanson, Mr. Jakob Alfred",male,34,0,0,3101264,6.4958,,S
+204,0,3,"Youseff, Mr. Gerious",male,45.5,0,0,2628,7.225,,C
+205,1,3,"Cohen, Mr. Gurshon ""Gus""",male,18,0,0,A/5 3540,8.05,,S
+206,0,3,"Strom, Miss. Telma Matilda",female,2,0,1,347054,10.4625,G6,S
+207,0,3,"Backstrom, Mr. Karl Alfred",male,32,1,0,3101278,15.85,,S
+208,1,3,"Albimona, Mr. Nassef Cassem",male,26,0,0,2699,18.7875,,C
+209,1,3,"Carr, Miss. Helen ""Ellen""",female,16,0,0,367231,7.75,,Q
+210,1,1,"Blank, Mr. Henry",male,40,0,0,112277,31,A31,C
+211,0,3,"Ali, Mr. Ahmed",male,24,0,0,SOTON/O.Q. 3101311,7.05,,S
+212,1,2,"Cameron, Miss. Clear Annie",female,35,0,0,F.C.C. 13528,21,,S
+213,0,3,"Perkin, Mr. John Henry",male,22,0,0,A/5 21174,7.25,,S
+214,0,2,"Givard, Mr. Hans Kristensen",male,30,0,0,250646,13,,S
+215,0,3,"Kiernan, Mr. Philip",male,,1,0,367229,7.75,,Q
+216,1,1,"Newell, Miss. Madeleine",female,31,1,0,35273,113.275,D36,C
+217,1,3,"Honkanen, Miss. Eliina",female,27,0,0,STON/O2. 3101283,7.925,,S
+218,0,2,"Jacobsohn, Mr. Sidney Samuel",male,42,1,0,243847,27,,S
+219,1,1,"Bazzani, Miss. Albina",female,32,0,0,11813,76.2917,D15,C
+220,0,2,"Harris, Mr. Walter",male,30,0,0,W/C 14208,10.5,,S
+221,1,3,"Sunderland, Mr. Victor Francis",male,16,0,0,SOTON/OQ 392089,8.05,,S
+222,0,2,"Bracken, Mr. James H",male,27,0,0,220367,13,,S
+223,0,3,"Green, Mr. George Henry",male,51,0,0,21440,8.05,,S
+224,0,3,"Nenkoff, Mr. Christo",male,,0,0,349234,7.8958,,S
+225,1,1,"Hoyt, Mr. Frederick Maxfield",male,38,1,0,19943,90,C93,S
+226,0,3,"Berglund, Mr. Karl Ivar Sven",male,22,0,0,PP 4348,9.35,,S
+227,1,2,"Mellors, Mr. William John",male,19,0,0,SW/PP 751,10.5,,S
+228,0,3,"Lovell, Mr. John Hall (""Henry"")",male,20.5,0,0,A/5 21173,7.25,,S
+229,0,2,"Fahlstrom, Mr. Arne Jonas",male,18,0,0,236171,13,,S
+230,0,3,"Lefebre, Miss. Mathilde",female,,3,1,4133,25.4667,,S
+231,1,1,"Harris, Mrs. Henry Birkhardt (Irene Wallach)",female,35,1,0,36973,83.475,C83,S
+232,0,3,"Larsson, Mr. Bengt Edvin",male,29,0,0,347067,7.775,,S
+233,0,2,"Sjostedt, Mr. Ernst Adolf",male,59,0,0,237442,13.5,,S
+234,1,3,"Asplund, Miss. Lillian Gertrud",female,5,4,2,347077,31.3875,,S
+235,0,2,"Leyson, Mr. Robert William Norman",male,24,0,0,C.A. 29566,10.5,,S
+236,0,3,"Harknett, Miss. Alice Phoebe",female,,0,0,W./C. 6609,7.55,,S
+237,0,2,"Hold, Mr. Stephen",male,44,1,0,26707,26,,S
+238,1,2,"Collyer, Miss. Marjorie ""Lottie""",female,8,0,2,C.A. 31921,26.25,,S
+239,0,2,"Pengelly, Mr. Frederick William",male,19,0,0,28665,10.5,,S
+240,0,2,"Hunt, Mr. George Henry",male,33,0,0,SCO/W 1585,12.275,,S
+241,0,3,"Zabour, Miss. Thamine",female,,1,0,2665,14.4542,,C
+242,1,3,"Murphy, Miss. Katherine ""Kate""",female,,1,0,367230,15.5,,Q
+243,0,2,"Coleridge, Mr. Reginald Charles",male,29,0,0,W./C. 14263,10.5,,S
+244,0,3,"Maenpaa, Mr. Matti Alexanteri",male,22,0,0,STON/O 2. 3101275,7.125,,S
+245,0,3,"Attalah, Mr. Sleiman",male,30,0,0,2694,7.225,,C
+246,0,1,"Minahan, Dr. William Edward",male,44,2,0,19928,90,C78,Q
+247,0,3,"Lindahl, Miss. Agda Thorilda Viktoria",female,25,0,0,347071,7.775,,S
+248,1,2,"Hamalainen, Mrs. William (Anna)",female,24,0,2,250649,14.5,,S
+249,1,1,"Beckwith, Mr. Richard Leonard",male,37,1,1,11751,52.5542,D35,S
+250,0,2,"Carter, Rev. Ernest Courtenay",male,54,1,0,244252,26,,S
+251,0,3,"Reed, Mr. James George",male,,0,0,362316,7.25,,S
+252,0,3,"Strom, Mrs. Wilhelm (Elna Matilda Persson)",female,29,1,1,347054,10.4625,G6,S
+253,0,1,"Stead, Mr. William Thomas",male,62,0,0,113514,26.55,C87,S
+254,0,3,"Lobb, Mr. William Arthur",male,30,1,0,A/5. 3336,16.1,,S
+255,0,3,"Rosblom, Mrs. Viktor (Helena Wilhelmina)",female,41,0,2,370129,20.2125,,S
+256,1,3,"Touma, Mrs. Darwis (Hanne Youssef Razi)",female,29,0,2,2650,15.2458,,C
+257,1,1,"Thorne, Mrs. Gertrude Maybelle",female,,0,0,PC 17585,79.2,,C
+258,1,1,"Cherry, Miss. Gladys",female,30,0,0,110152,86.5,B77,S
+259,1,1,"Ward, Miss. Anna",female,35,0,0,PC 17755,512.3292,,C
+260,1,2,"Parrish, Mrs. (Lutie Davis)",female,50,0,1,230433,26,,S
+261,0,3,"Smith, Mr. Thomas",male,,0,0,384461,7.75,,Q
+262,1,3,"Asplund, Master. Edvin Rojj Felix",male,3,4,2,347077,31.3875,,S
+263,0,1,"Taussig, Mr. Emil",male,52,1,1,110413,79.65,E67,S
+264,0,1,"Harrison, Mr. William",male,40,0,0,112059,0,B94,S
+265,0,3,"Henry, Miss. Delia",female,,0,0,382649,7.75,,Q
+266,0,2,"Reeves, Mr. David",male,36,0,0,C.A. 17248,10.5,,S
+267,0,3,"Panula, Mr. Ernesti Arvid",male,16,4,1,3101295,39.6875,,S
+268,1,3,"Persson, Mr. Ernst Ulrik",male,25,1,0,347083,7.775,,S
+269,1,1,"Graham, Mrs. William Thompson (Edith Junkins)",female,58,0,1,PC 17582,153.4625,C125,S
+270,1,1,"Bissette, Miss. Amelia",female,35,0,0,PC 17760,135.6333,C99,S
+271,0,1,"Cairns, Mr. Alexander",male,,0,0,113798,31,,S
+272,1,3,"Tornquist, Mr. William Henry",male,25,0,0,LINE,0,,S
+273,1,2,"Mellinger, Mrs. (Elizabeth Anne Maidment)",female,41,0,1,250644,19.5,,S
+274,0,1,"Natsch, Mr. Charles H",male,37,0,1,PC 17596,29.7,C118,C
+275,1,3,"Healy, Miss. Hanora ""Nora""",female,,0,0,370375,7.75,,Q
+276,1,1,"Andrews, Miss. Kornelia Theodosia",female,63,1,0,13502,77.9583,D7,S
+277,0,3,"Lindblom, Miss. Augusta Charlotta",female,45,0,0,347073,7.75,,S
+278,0,2,"Parkes, Mr. Francis ""Frank""",male,,0,0,239853,0,,S
+279,0,3,"Rice, Master. Eric",male,7,4,1,382652,29.125,,Q
+280,1,3,"Abbott, Mrs. Stanton (Rosa Hunt)",female,35,1,1,C.A. 2673,20.25,,S
+281,0,3,"Duane, Mr. Frank",male,65,0,0,336439,7.75,,Q
+282,0,3,"Olsson, Mr. Nils Johan Goransson",male,28,0,0,347464,7.8542,,S
+283,0,3,"de Pelsmaeker, Mr. Alfons",male,16,0,0,345778,9.5,,S
+284,1,3,"Dorking, Mr. Edward Arthur",male,19,0,0,A/5. 10482,8.05,,S
+285,0,1,"Smith, Mr. Richard William",male,,0,0,113056,26,A19,S
+286,0,3,"Stankovic, Mr. Ivan",male,33,0,0,349239,8.6625,,C
+287,1,3,"de Mulder, Mr. Theodore",male,30,0,0,345774,9.5,,S
+288,0,3,"Naidenoff, Mr. Penko",male,22,0,0,349206,7.8958,,S
+289,1,2,"Hosono, Mr. Masabumi",male,42,0,0,237798,13,,S
+290,1,3,"Connolly, Miss. Kate",female,22,0,0,370373,7.75,,Q
+291,1,1,"Barber, Miss. Ellen ""Nellie""",female,26,0,0,19877,78.85,,S
+292,1,1,"Bishop, Mrs. Dickinson H (Helen Walton)",female,19,1,0,11967,91.0792,B49,C
+293,0,2,"Levy, Mr. Rene Jacques",male,36,0,0,SC/Paris 2163,12.875,D,C
+294,0,3,"Haas, Miss. Aloisia",female,24,0,0,349236,8.85,,S
+295,0,3,"Mineff, Mr. Ivan",male,24,0,0,349233,7.8958,,S
+296,0,1,"Lewy, Mr. Ervin G",male,,0,0,PC 17612,27.7208,,C
+297,0,3,"Hanna, Mr. Mansour",male,23.5,0,0,2693,7.2292,,C
+298,0,1,"Allison, Miss. Helen Loraine",female,2,1,2,113781,151.55,C22 C26,S
+299,1,1,"Saalfeld, Mr. Adolphe",male,,0,0,19988,30.5,C106,S
+300,1,1,"Baxter, Mrs. James (Helene DeLaudeniere Chaput)",female,50,0,1,PC 17558,247.5208,B58 B60,C
+301,1,3,"Kelly, Miss. Anna Katherine ""Annie Kate""",female,,0,0,9234,7.75,,Q
+302,1,3,"McCoy, Mr. Bernard",male,,2,0,367226,23.25,,Q
+303,0,3,"Johnson, Mr. William Cahoone Jr",male,19,0,0,LINE,0,,S
+304,1,2,"Keane, Miss. Nora A",female,,0,0,226593,12.35,E101,Q
+305,0,3,"Williams, Mr. Howard Hugh ""Harry""",male,,0,0,A/5 2466,8.05,,S
+306,1,1,"Allison, Master. Hudson Trevor",male,0.92,1,2,113781,151.55,C22 C26,S
+307,1,1,"Fleming, Miss. Margaret",female,,0,0,17421,110.8833,,C
+308,1,1,"Penasco y Castellana, Mrs. Victor de Satode (Maria Josefa Perez de Soto y Vallejo)",female,17,1,0,PC 17758,108.9,C65,C
+309,0,2,"Abelson, Mr. Samuel",male,30,1,0,P/PP 3381,24,,C
+310,1,1,"Francatelli, Miss. Laura Mabel",female,30,0,0,PC 17485,56.9292,E36,C
+311,1,1,"Hays, Miss. Margaret Bechstein",female,24,0,0,11767,83.1583,C54,C
+312,1,1,"Ryerson, Miss. Emily Borie",female,18,2,2,PC 17608,262.375,B57 B59 B63 B66,C
+313,0,2,"Lahtinen, Mrs. William (Anna Sylfven)",female,26,1,1,250651,26,,S
+314,0,3,"Hendekovic, Mr. Ignjac",male,28,0,0,349243,7.8958,,S
+315,0,2,"Hart, Mr. Benjamin",male,43,1,1,F.C.C. 13529,26.25,,S
+316,1,3,"Nilsson, Miss. Helmina Josefina",female,26,0,0,347470,7.8542,,S
+317,1,2,"Kantor, Mrs. Sinai (Miriam Sternin)",female,24,1,0,244367,26,,S
+318,0,2,"Moraweck, Dr. Ernest",male,54,0,0,29011,14,,S
+319,1,1,"Wick, Miss. Mary Natalie",female,31,0,2,36928,164.8667,C7,S
+320,1,1,"Spedden, Mrs. Frederic Oakley (Margaretta Corning Stone)",female,40,1,1,16966,134.5,E34,C
+321,0,3,"Dennis, Mr. Samuel",male,22,0,0,A/5 21172,7.25,,S
+322,0,3,"Danoff, Mr. Yoto",male,27,0,0,349219,7.8958,,S
+323,1,2,"Slayter, Miss. Hilda Mary",female,30,0,0,234818,12.35,,Q
+324,1,2,"Caldwell, Mrs. Albert Francis (Sylvia Mae Harbaugh)",female,22,1,1,248738,29,,S
+325,0,3,"Sage, Mr. George John Jr",male,,8,2,CA. 2343,69.55,,S
+326,1,1,"Young, Miss. Marie Grice",female,36,0,0,PC 17760,135.6333,C32,C
+327,0,3,"Nysveen, Mr. Johan Hansen",male,61,0,0,345364,6.2375,,S
+328,1,2,"Ball, Mrs. (Ada E Hall)",female,36,0,0,28551,13,D,S
+329,1,3,"Goldsmith, Mrs. Frank John (Emily Alice Brown)",female,31,1,1,363291,20.525,,S
+330,1,1,"Hippach, Miss. Jean Gertrude",female,16,0,1,111361,57.9792,B18,C
+331,1,3,"McCoy, Miss. Agnes",female,,2,0,367226,23.25,,Q
+332,0,1,"Partner, Mr. Austen",male,45.5,0,0,113043,28.5,C124,S
+333,0,1,"Graham, Mr. George Edward",male,38,0,1,PC 17582,153.4625,C91,S
+334,0,3,"Vander Planke, Mr. Leo Edmondus",male,16,2,0,345764,18,,S
+335,1,1,"Frauenthal, Mrs. Henry William (Clara Heinsheimer)",female,,1,0,PC 17611,133.65,,S
+336,0,3,"Denkoff, Mr. Mitto",male,,0,0,349225,7.8958,,S
+337,0,1,"Pears, Mr. Thomas Clinton",male,29,1,0,113776,66.6,C2,S
+338,1,1,"Burns, Miss. Elizabeth Margaret",female,41,0,0,16966,134.5,E40,C
+339,1,3,"Dahl, Mr. Karl Edwart",male,45,0,0,7598,8.05,,S
+340,0,1,"Blackwell, Mr. Stephen Weart",male,45,0,0,113784,35.5,T,S
+341,1,2,"Navratil, Master. Edmond Roger",male,2,1,1,230080,26,F2,S
+342,1,1,"Fortune, Miss. Alice Elizabeth",female,24,3,2,19950,263,C23 C25 C27,S
+343,0,2,"Collander, Mr. Erik Gustaf",male,28,0,0,248740,13,,S
+344,0,2,"Sedgwick, Mr. Charles Frederick Waddington",male,25,0,0,244361,13,,S
+345,0,2,"Fox, Mr. Stanley Hubert",male,36,0,0,229236,13,,S
+346,1,2,"Brown, Miss. Amelia ""Mildred""",female,24,0,0,248733,13,F33,S
+347,1,2,"Smith, Miss. Marion Elsie",female,40,0,0,31418,13,,S
+348,1,3,"Davison, Mrs. Thomas Henry (Mary E Finck)",female,,1,0,386525,16.1,,S
+349,1,3,"Coutts, Master. William Loch ""William""",male,3,1,1,C.A. 37671,15.9,,S
+350,0,3,"Dimic, Mr. Jovan",male,42,0,0,315088,8.6625,,S
+351,0,3,"Odahl, Mr. Nils Martin",male,23,0,0,7267,9.225,,S
+352,0,1,"Williams-Lambert, Mr. Fletcher Fellows",male,,0,0,113510,35,C128,S
+353,0,3,"Elias, Mr. Tannous",male,15,1,1,2695,7.2292,,C
+354,0,3,"Arnold-Franchi, Mr. Josef",male,25,1,0,349237,17.8,,S
+355,0,3,"Yousif, Mr. Wazli",male,,0,0,2647,7.225,,C
+356,0,3,"Vanden Steen, Mr. Leo Peter",male,28,0,0,345783,9.5,,S
+357,1,1,"Bowerman, Miss. Elsie Edith",female,22,0,1,113505,55,E33,S
+358,0,2,"Funk, Miss. Annie Clemmer",female,38,0,0,237671,13,,S
+359,1,3,"McGovern, Miss. Mary",female,,0,0,330931,7.8792,,Q
+360,1,3,"Mockler, Miss. Helen Mary ""Ellie""",female,,0,0,330980,7.8792,,Q
+361,0,3,"Skoog, Mr. Wilhelm",male,40,1,4,347088,27.9,,S
+362,0,2,"del Carlo, Mr. Sebastiano",male,29,1,0,SC/PARIS 2167,27.7208,,C
+363,0,3,"Barbara, Mrs. (Catherine David)",female,45,0,1,2691,14.4542,,C
+364,0,3,"Asim, Mr. Adola",male,35,0,0,SOTON/O.Q. 3101310,7.05,,S
+365,0,3,"O'Brien, Mr. Thomas",male,,1,0,370365,15.5,,Q
+366,0,3,"Adahl, Mr. Mauritz Nils Martin",male,30,0,0,C 7076,7.25,,S
+367,1,1,"Warren, Mrs. Frank Manley (Anna Sophia Atkinson)",female,60,1,0,110813,75.25,D37,C
+368,1,3,"Moussa, Mrs. (Mantoura Boulos)",female,,0,0,2626,7.2292,,C
+369,1,3,"Jermyn, Miss. Annie",female,,0,0,14313,7.75,,Q
+370,1,1,"Aubart, Mme. Leontine Pauline",female,24,0,0,PC 17477,69.3,B35,C
+371,1,1,"Harder, Mr. George Achilles",male,25,1,0,11765,55.4417,E50,C
+372,0,3,"Wiklund, Mr. Jakob Alfred",male,18,1,0,3101267,6.4958,,S
+373,0,3,"Beavan, Mr. William Thomas",male,19,0,0,323951,8.05,,S
+374,0,1,"Ringhini, Mr. Sante",male,22,0,0,PC 17760,135.6333,,C
+375,0,3,"Palsson, Miss. Stina Viola",female,3,3,1,349909,21.075,,S
+376,1,1,"Meyer, Mrs. Edgar Joseph (Leila Saks)",female,,1,0,PC 17604,82.1708,,C
+377,1,3,"Landergren, Miss. Aurora Adelia",female,22,0,0,C 7077,7.25,,S
+378,0,1,"Widener, Mr. Harry Elkins",male,27,0,2,113503,211.5,C82,C
+379,0,3,"Betros, Mr. Tannous",male,20,0,0,2648,4.0125,,C
+380,0,3,"Gustafsson, Mr. Karl Gideon",male,19,0,0,347069,7.775,,S
+381,1,1,"Bidois, Miss. Rosalie",female,42,0,0,PC 17757,227.525,,C
+382,1,3,"Nakid, Miss. Maria (""Mary"")",female,1,0,2,2653,15.7417,,C
+383,0,3,"Tikkanen, Mr. Juho",male,32,0,0,STON/O 2. 3101293,7.925,,S
+384,1,1,"Holverson, Mrs. Alexander Oskar (Mary Aline Towner)",female,35,1,0,113789,52,,S
+385,0,3,"Plotcharsky, Mr. Vasil",male,,0,0,349227,7.8958,,S
+386,0,2,"Davies, Mr. Charles Henry",male,18,0,0,S.O.C. 14879,73.5,,S
+387,0,3,"Goodwin, Master. Sidney Leonard",male,1,5,2,CA 2144,46.9,,S
+388,1,2,"Buss, Miss. Kate",female,36,0,0,27849,13,,S
+389,0,3,"Sadlier, Mr. Matthew",male,,0,0,367655,7.7292,,Q
+390,1,2,"Lehmann, Miss. Bertha",female,17,0,0,SC 1748,12,,C
+391,1,1,"Carter, Mr. William Ernest",male,36,1,2,113760,120,B96 B98,S
+392,1,3,"Jansson, Mr. Carl Olof",male,21,0,0,350034,7.7958,,S
+393,0,3,"Gustafsson, Mr. Johan Birger",male,28,2,0,3101277,7.925,,S
+394,1,1,"Newell, Miss. Marjorie",female,23,1,0,35273,113.275,D36,C
+395,1,3,"Sandstrom, Mrs. Hjalmar (Agnes Charlotta Bengtsson)",female,24,0,2,PP 9549,16.7,G6,S
+396,0,3,"Johansson, Mr. Erik",male,22,0,0,350052,7.7958,,S
+397,0,3,"Olsson, Miss. Elina",female,31,0,0,350407,7.8542,,S
+398,0,2,"McKane, Mr. Peter David",male,46,0,0,28403,26,,S
+399,0,2,"Pain, Dr. Alfred",male,23,0,0,244278,10.5,,S
+400,1,2,"Trout, Mrs. William H (Jessie L)",female,28,0,0,240929,12.65,,S
+401,1,3,"Niskanen, Mr. Juha",male,39,0,0,STON/O 2. 3101289,7.925,,S
+402,0,3,"Adams, Mr. John",male,26,0,0,341826,8.05,,S
+403,0,3,"Jussila, Miss. Mari Aina",female,21,1,0,4137,9.825,,S
+404,0,3,"Hakkarainen, Mr. Pekka Pietari",male,28,1,0,STON/O2. 3101279,15.85,,S
+405,0,3,"Oreskovic, Miss. Marija",female,20,0,0,315096,8.6625,,S
+406,0,2,"Gale, Mr. Shadrach",male,34,1,0,28664,21,,S
+407,0,3,"Widegren, Mr. Carl/Charles Peter",male,51,0,0,347064,7.75,,S
+408,1,2,"Richards, Master. William Rowe",male,3,1,1,29106,18.75,,S
+409,0,3,"Birkeland, Mr. Hans Martin Monsen",male,21,0,0,312992,7.775,,S
+410,0,3,"Lefebre, Miss. Ida",female,,3,1,4133,25.4667,,S
+411,0,3,"Sdycoff, Mr. Todor",male,,0,0,349222,7.8958,,S
+412,0,3,"Hart, Mr. Henry",male,,0,0,394140,6.8583,,Q
+413,1,1,"Minahan, Miss. Daisy E",female,33,1,0,19928,90,C78,Q
+414,0,2,"Cunningham, Mr. Alfred Fleming",male,,0,0,239853,0,,S
+415,1,3,"Sundman, Mr. Johan Julian",male,44,0,0,STON/O 2. 3101269,7.925,,S
+416,0,3,"Meek, Mrs. Thomas (Annie Louise Rowley)",female,,0,0,343095,8.05,,S
+417,1,2,"Drew, Mrs. James Vivian (Lulu Thorne Christian)",female,34,1,1,28220,32.5,,S
+418,1,2,"Silven, Miss. Lyyli Karoliina",female,18,0,2,250652,13,,S
+419,0,2,"Matthews, Mr. William John",male,30,0,0,28228,13,,S
+420,0,3,"Van Impe, Miss. Catharina",female,10,0,2,345773,24.15,,S
+421,0,3,"Gheorgheff, Mr. Stanio",male,,0,0,349254,7.8958,,C
+422,0,3,"Charters, Mr. David",male,21,0,0,A/5. 13032,7.7333,,Q
+423,0,3,"Zimmerman, Mr. Leo",male,29,0,0,315082,7.875,,S
+424,0,3,"Danbom, Mrs. Ernst Gilbert (Anna Sigrid Maria Brogren)",female,28,1,1,347080,14.4,,S
+425,0,3,"Rosblom, Mr. Viktor Richard",male,18,1,1,370129,20.2125,,S
+426,0,3,"Wiseman, Mr. Phillippe",male,,0,0,A/4. 34244,7.25,,S
+427,1,2,"Clarke, Mrs. Charles V (Ada Maria Winfield)",female,28,1,0,2003,26,,S
+428,1,2,"Phillips, Miss. Kate Florence (""Mrs Kate Louise Phillips Marshall"")",female,19,0,0,250655,26,,S
+429,0,3,"Flynn, Mr. James",male,,0,0,364851,7.75,,Q
+430,1,3,"Pickard, Mr. Berk (Berk Trembisky)",male,32,0,0,SOTON/O.Q. 392078,8.05,E10,S
+431,1,1,"Bjornstrom-Steffansson, Mr. Mauritz Hakan",male,28,0,0,110564,26.55,C52,S
+432,1,3,"Thorneycroft, Mrs. Percival (Florence Kate White)",female,,1,0,376564,16.1,,S
+433,1,2,"Louch, Mrs. Charles Alexander (Alice Adelaide Slow)",female,42,1,0,SC/AH 3085,26,,S
+434,0,3,"Kallio, Mr. Nikolai Erland",male,17,0,0,STON/O 2. 3101274,7.125,,S
+435,0,1,"Silvey, Mr. William Baird",male,50,1,0,13507,55.9,E44,S
+436,1,1,"Carter, Miss. Lucile Polk",female,14,1,2,113760,120,B96 B98,S
+437,0,3,"Ford, Miss. Doolina Margaret ""Daisy""",female,21,2,2,W./C. 6608,34.375,,S
+438,1,2,"Richards, Mrs. Sidney (Emily Hocking)",female,24,2,3,29106,18.75,,S
+439,0,1,"Fortune, Mr. Mark",male,64,1,4,19950,263,C23 C25 C27,S
+440,0,2,"Kvillner, Mr. Johan Henrik Johannesson",male,31,0,0,C.A. 18723,10.5,,S
+441,1,2,"Hart, Mrs. Benjamin (Esther Ada Bloomfield)",female,45,1,1,F.C.C. 13529,26.25,,S
+442,0,3,"Hampe, Mr. Leon",male,20,0,0,345769,9.5,,S
+443,0,3,"Petterson, Mr. Johan Emil",male,25,1,0,347076,7.775,,S
+444,1,2,"Reynaldo, Ms. Encarnacion",female,28,0,0,230434,13,,S
+445,1,3,"Johannesen-Bratthammer, Mr. Bernt",male,,0,0,65306,8.1125,,S
+446,1,1,"Dodge, Master. Washington",male,4,0,2,33638,81.8583,A34,S
+447,1,2,"Mellinger, Miss. Madeleine Violet",female,13,0,1,250644,19.5,,S
+448,1,1,"Seward, Mr. Frederic Kimber",male,34,0,0,113794,26.55,,S
+449,1,3,"Baclini, Miss. Marie Catherine",female,5,2,1,2666,19.2583,,C
+450,1,1,"Peuchen, Major. Arthur Godfrey",male,52,0,0,113786,30.5,C104,S
+451,0,2,"West, Mr. Edwy Arthur",male,36,1,2,C.A. 34651,27.75,,S
+452,0,3,"Hagland, Mr. Ingvald Olai Olsen",male,,1,0,65303,19.9667,,S
+453,0,1,"Foreman, Mr. Benjamin Laventall",male,30,0,0,113051,27.75,C111,C
+454,1,1,"Goldenberg, Mr. Samuel L",male,49,1,0,17453,89.1042,C92,C
+455,0,3,"Peduzzi, Mr. Joseph",male,,0,0,A/5 2817,8.05,,S
+456,1,3,"Jalsevac, Mr. Ivan",male,29,0,0,349240,7.8958,,C
+457,0,1,"Millet, Mr. Francis Davis",male,65,0,0,13509,26.55,E38,S
+458,1,1,"Kenyon, Mrs. Frederick R (Marion)",female,,1,0,17464,51.8625,D21,S
+459,1,2,"Toomey, Miss. Ellen",female,50,0,0,F.C.C. 13531,10.5,,S
+460,0,3,"O'Connor, Mr. Maurice",male,,0,0,371060,7.75,,Q
+461,1,1,"Anderson, Mr. Harry",male,48,0,0,19952,26.55,E12,S
+462,0,3,"Morley, Mr. William",male,34,0,0,364506,8.05,,S
+463,0,1,"Gee, Mr. Arthur H",male,47,0,0,111320,38.5,E63,S
+464,0,2,"Milling, Mr. Jacob Christian",male,48,0,0,234360,13,,S
+465,0,3,"Maisner, Mr. Simon",male,,0,0,A/S 2816,8.05,,S
+466,0,3,"Goncalves, Mr. Manuel Estanslas",male,38,0,0,SOTON/O.Q. 3101306,7.05,,S
+467,0,2,"Campbell, Mr. William",male,,0,0,239853,0,,S
+468,0,1,"Smart, Mr. John Montgomery",male,56,0,0,113792,26.55,,S
+469,0,3,"Scanlan, Mr. James",male,,0,0,36209,7.725,,Q
+470,1,3,"Baclini, Miss. Helene Barbara",female,0.75,2,1,2666,19.2583,,C
+471,0,3,"Keefe, Mr. Arthur",male,,0,0,323592,7.25,,S
+472,0,3,"Cacic, Mr. Luka",male,38,0,0,315089,8.6625,,S
+473,1,2,"West, Mrs. Edwy Arthur (Ada Mary Worth)",female,33,1,2,C.A. 34651,27.75,,S
+474,1,2,"Jerwan, Mrs. Amin S (Marie Marthe Thuillard)",female,23,0,0,SC/AH Basle 541,13.7917,D,C
+475,0,3,"Strandberg, Miss. Ida Sofia",female,22,0,0,7553,9.8375,,S
+476,0,1,"Clifford, Mr. George Quincy",male,,0,0,110465,52,A14,S
+477,0,2,"Renouf, Mr. Peter Henry",male,34,1,0,31027,21,,S
+478,0,3,"Braund, Mr. Lewis Richard",male,29,1,0,3460,7.0458,,S
+479,0,3,"Karlsson, Mr. Nils August",male,22,0,0,350060,7.5208,,S
+480,1,3,"Hirvonen, Miss. Hildur E",female,2,0,1,3101298,12.2875,,S
+481,0,3,"Goodwin, Master. Harold Victor",male,9,5,2,CA 2144,46.9,,S
+482,0,2,"Frost, Mr. Anthony Wood ""Archie""",male,,0,0,239854,0,,S
+483,0,3,"Rouse, Mr. Richard Henry",male,50,0,0,A/5 3594,8.05,,S
+484,1,3,"Turkula, Mrs. (Hedwig)",female,63,0,0,4134,9.5875,,S
+485,1,1,"Bishop, Mr. Dickinson H",male,25,1,0,11967,91.0792,B49,C
+486,0,3,"Lefebre, Miss. Jeannie",female,,3,1,4133,25.4667,,S
+487,1,1,"Hoyt, Mrs. Frederick Maxfield (Jane Anne Forby)",female,35,1,0,19943,90,C93,S
+488,0,1,"Kent, Mr. Edward Austin",male,58,0,0,11771,29.7,B37,C
+489,0,3,"Somerton, Mr. Francis William",male,30,0,0,A.5. 18509,8.05,,S
+490,1,3,"Coutts, Master. Eden Leslie ""Neville""",male,9,1,1,C.A. 37671,15.9,,S
+491,0,3,"Hagland, Mr. Konrad Mathias Reiersen",male,,1,0,65304,19.9667,,S
+492,0,3,"Windelov, Mr. Einar",male,21,0,0,SOTON/OQ 3101317,7.25,,S
+493,0,1,"Molson, Mr. Harry Markland",male,55,0,0,113787,30.5,C30,S
+494,0,1,"Artagaveytia, Mr. Ramon",male,71,0,0,PC 17609,49.5042,,C
+495,0,3,"Stanley, Mr. Edward Roland",male,21,0,0,A/4 45380,8.05,,S
+496,0,3,"Yousseff, Mr. Gerious",male,,0,0,2627,14.4583,,C
+497,1,1,"Eustis, Miss. Elizabeth Mussey",female,54,1,0,36947,78.2667,D20,C
+498,0,3,"Shellard, Mr. Frederick William",male,,0,0,C.A. 6212,15.1,,S
+499,0,1,"Allison, Mrs. Hudson J C (Bessie Waldo Daniels)",female,25,1,2,113781,151.55,C22 C26,S
+500,0,3,"Svensson, Mr. Olof",male,24,0,0,350035,7.7958,,S
+501,0,3,"Calic, Mr. Petar",male,17,0,0,315086,8.6625,,S
+502,0,3,"Canavan, Miss. Mary",female,21,0,0,364846,7.75,,Q
+503,0,3,"O'Sullivan, Miss. Bridget Mary",female,,0,0,330909,7.6292,,Q
+504,0,3,"Laitinen, Miss. Kristina Sofia",female,37,0,0,4135,9.5875,,S
+505,1,1,"Maioni, Miss. Roberta",female,16,0,0,110152,86.5,B79,S
+506,0,1,"Penasco y Castellana, Mr. Victor de Satode",male,18,1,0,PC 17758,108.9,C65,C
+507,1,2,"Quick, Mrs. Frederick Charles (Jane Richards)",female,33,0,2,26360,26,,S
+508,1,1,"Bradley, Mr. George (""George Arthur Brayton"")",male,,0,0,111427,26.55,,S
+509,0,3,"Olsen, Mr. Henry Margido",male,28,0,0,C 4001,22.525,,S
+510,1,3,"Lang, Mr. Fang",male,26,0,0,1601,56.4958,,S
+511,1,3,"Daly, Mr. Eugene Patrick",male,29,0,0,382651,7.75,,Q
+512,0,3,"Webber, Mr. James",male,,0,0,SOTON/OQ 3101316,8.05,,S
+513,1,1,"McGough, Mr. James Robert",male,36,0,0,PC 17473,26.2875,E25,S
+514,1,1,"Rothschild, Mrs. Martin (Elizabeth L. Barrett)",female,54,1,0,PC 17603,59.4,,C
+515,0,3,"Coleff, Mr. Satio",male,24,0,0,349209,7.4958,,S
+516,0,1,"Walker, Mr. William Anderson",male,47,0,0,36967,34.0208,D46,S
+517,1,2,"Lemore, Mrs. (Amelia Milley)",female,34,0,0,C.A. 34260,10.5,F33,S
+518,0,3,"Ryan, Mr. Patrick",male,,0,0,371110,24.15,,Q
+519,1,2,"Angle, Mrs. William A (Florence ""Mary"" Agnes Hughes)",female,36,1,0,226875,26,,S
+520,0,3,"Pavlovic, Mr. Stefo",male,32,0,0,349242,7.8958,,S
+521,1,1,"Perreault, Miss. Anne",female,30,0,0,12749,93.5,B73,S
+522,0,3,"Vovk, Mr. Janko",male,22,0,0,349252,7.8958,,S
+523,0,3,"Lahoud, Mr. Sarkis",male,,0,0,2624,7.225,,C
+524,1,1,"Hippach, Mrs. Louis Albert (Ida Sophia Fischer)",female,44,0,1,111361,57.9792,B18,C
+525,0,3,"Kassem, Mr. Fared",male,,0,0,2700,7.2292,,C
+526,0,3,"Farrell, Mr. James",male,40.5,0,0,367232,7.75,,Q
+527,1,2,"Ridsdale, Miss. Lucy",female,50,0,0,W./C. 14258,10.5,,S
+528,0,1,"Farthing, Mr. John",male,,0,0,PC 17483,221.7792,C95,S
+529,0,3,"Salonen, Mr. Johan Werner",male,39,0,0,3101296,7.925,,S
+530,0,2,"Hocking, Mr. Richard George",male,23,2,1,29104,11.5,,S
+531,1,2,"Quick, Miss. Phyllis May",female,2,1,1,26360,26,,S
+532,0,3,"Toufik, Mr. Nakli",male,,0,0,2641,7.2292,,C
+533,0,3,"Elias, Mr. Joseph Jr",male,17,1,1,2690,7.2292,,C
+534,1,3,"Peter, Mrs. Catherine (Catherine Rizk)",female,,0,2,2668,22.3583,,C
+535,0,3,"Cacic, Miss. Marija",female,30,0,0,315084,8.6625,,S
+536,1,2,"Hart, Miss. Eva Miriam",female,7,0,2,F.C.C. 13529,26.25,,S
+537,0,1,"Butt, Major. Archibald Willingham",male,45,0,0,113050,26.55,B38,S
+538,1,1,"LeRoy, Miss. Bertha",female,30,0,0,PC 17761,106.425,,C
+539,0,3,"Risien, Mr. Samuel Beard",male,,0,0,364498,14.5,,S
+540,1,1,"Frolicher, Miss. Hedwig Margaritha",female,22,0,2,13568,49.5,B39,C
+541,1,1,"Crosby, Miss. Harriet R",female,36,0,2,WE/P 5735,71,B22,S
+542,0,3,"Andersson, Miss. Ingeborg Constanzia",female,9,4,2,347082,31.275,,S
+543,0,3,"Andersson, Miss. Sigrid Elisabeth",female,11,4,2,347082,31.275,,S
+544,1,2,"Beane, Mr. Edward",male,32,1,0,2908,26,,S
+545,0,1,"Douglas, Mr. Walter Donald",male,50,1,0,PC 17761,106.425,C86,C
+546,0,1,"Nicholson, Mr. Arthur Ernest",male,64,0,0,693,26,,S
+547,1,2,"Beane, Mrs. Edward (Ethel Clarke)",female,19,1,0,2908,26,,S
+548,1,2,"Padro y Manent, Mr. Julian",male,,0,0,SC/PARIS 2146,13.8625,,C
+549,0,3,"Goldsmith, Mr. Frank John",male,33,1,1,363291,20.525,,S
+550,1,2,"Davies, Master. John Morgan Jr",male,8,1,1,C.A. 33112,36.75,,S
+551,1,1,"Thayer, Mr. John Borland Jr",male,17,0,2,17421,110.8833,C70,C
+552,0,2,"Sharp, Mr. Percival James R",male,27,0,0,244358,26,,S
+553,0,3,"O'Brien, Mr. Timothy",male,,0,0,330979,7.8292,,Q
+554,1,3,"Leeni, Mr. Fahim (""Philip Zenni"")",male,22,0,0,2620,7.225,,C
+555,1,3,"Ohman, Miss. Velin",female,22,0,0,347085,7.775,,S
+556,0,1,"Wright, Mr. George",male,62,0,0,113807,26.55,,S
+557,1,1,"Duff Gordon, Lady. (Lucille Christiana Sutherland) (""Mrs Morgan"")",female,48,1,0,11755,39.6,A16,C
+558,0,1,"Robbins, Mr. Victor",male,,0,0,PC 17757,227.525,,C
+559,1,1,"Taussig, Mrs. Emil (Tillie Mandelbaum)",female,39,1,1,110413,79.65,E67,S
+560,1,3,"de Messemaeker, Mrs. Guillaume Joseph (Emma)",female,36,1,0,345572,17.4,,S
+561,0,3,"Morrow, Mr. Thomas Rowan",male,,0,0,372622,7.75,,Q
+562,0,3,"Sivic, Mr. Husein",male,40,0,0,349251,7.8958,,S
+563,0,2,"Norman, Mr. Robert Douglas",male,28,0,0,218629,13.5,,S
+564,0,3,"Simmons, Mr. John",male,,0,0,SOTON/OQ 392082,8.05,,S
+565,0,3,"Meanwell, Miss. (Marion Ogden)",female,,0,0,SOTON/O.Q. 392087,8.05,,S
+566,0,3,"Davies, Mr. Alfred J",male,24,2,0,A/4 48871,24.15,,S
+567,0,3,"Stoytcheff, Mr. Ilia",male,19,0,0,349205,7.8958,,S
+568,0,3,"Palsson, Mrs. Nils (Alma Cornelia Berglund)",female,29,0,4,349909,21.075,,S
+569,0,3,"Doharr, Mr. Tannous",male,,0,0,2686,7.2292,,C
+570,1,3,"Jonsson, Mr. Carl",male,32,0,0,350417,7.8542,,S
+571,1,2,"Harris, Mr. George",male,62,0,0,S.W./PP 752,10.5,,S
+572,1,1,"Appleton, Mrs. Edward Dale (Charlotte Lamson)",female,53,2,0,11769,51.4792,C101,S
+573,1,1,"Flynn, Mr. John Irwin (""Irving"")",male,36,0,0,PC 17474,26.3875,E25,S
+574,1,3,"Kelly, Miss. Mary",female,,0,0,14312,7.75,,Q
+575,0,3,"Rush, Mr. Alfred George John",male,16,0,0,A/4. 20589,8.05,,S
+576,0,3,"Patchett, Mr. George",male,19,0,0,358585,14.5,,S
+577,1,2,"Garside, Miss. Ethel",female,34,0,0,243880,13,,S
+578,1,1,"Silvey, Mrs. William Baird (Alice Munger)",female,39,1,0,13507,55.9,E44,S
+579,0,3,"Caram, Mrs. Joseph (Maria Elias)",female,,1,0,2689,14.4583,,C
+580,1,3,"Jussila, Mr. Eiriik",male,32,0,0,STON/O 2. 3101286,7.925,,S
+581,1,2,"Christy, Miss. Julie Rachel",female,25,1,1,237789,30,,S
+582,1,1,"Thayer, Mrs. John Borland (Marian Longstreth Morris)",female,39,1,1,17421,110.8833,C68,C
+583,0,2,"Downton, Mr. William James",male,54,0,0,28403,26,,S
+584,0,1,"Ross, Mr. John Hugo",male,36,0,0,13049,40.125,A10,C
+585,0,3,"Paulner, Mr. Uscher",male,,0,0,3411,8.7125,,C
+586,1,1,"Taussig, Miss. Ruth",female,18,0,2,110413,79.65,E68,S
+587,0,2,"Jarvis, Mr. John Denzil",male,47,0,0,237565,15,,S
+588,1,1,"Frolicher-Stehli, Mr. Maxmillian",male,60,1,1,13567,79.2,B41,C
+589,0,3,"Gilinski, Mr. Eliezer",male,22,0,0,14973,8.05,,S
+590,0,3,"Murdlin, Mr. Joseph",male,,0,0,A./5. 3235,8.05,,S
+591,0,3,"Rintamaki, Mr. Matti",male,35,0,0,STON/O 2. 3101273,7.125,,S
+592,1,1,"Stephenson, Mrs. Walter Bertram (Martha Eustis)",female,52,1,0,36947,78.2667,D20,C
+593,0,3,"Elsbury, Mr. William James",male,47,0,0,A/5 3902,7.25,,S
+594,0,3,"Bourke, Miss. Mary",female,,0,2,364848,7.75,,Q
+595,0,2,"Chapman, Mr. John Henry",male,37,1,0,SC/AH 29037,26,,S
+596,0,3,"Van Impe, Mr. Jean Baptiste",male,36,1,1,345773,24.15,,S
+597,1,2,"Leitch, Miss. Jessie Wills",female,,0,0,248727,33,,S
+598,0,3,"Johnson, Mr. Alfred",male,49,0,0,LINE,0,,S
+599,0,3,"Boulos, Mr. Hanna",male,,0,0,2664,7.225,,C
+600,1,1,"Duff Gordon, Sir. Cosmo Edmund (""Mr Morgan"")",male,49,1,0,PC 17485,56.9292,A20,C
+601,1,2,"Jacobsohn, Mrs. Sidney Samuel (Amy Frances Christy)",female,24,2,1,243847,27,,S
+602,0,3,"Slabenoff, Mr. Petco",male,,0,0,349214,7.8958,,S
+603,0,1,"Harrington, Mr. Charles H",male,,0,0,113796,42.4,,S
+604,0,3,"Torber, Mr. Ernst William",male,44,0,0,364511,8.05,,S
+605,1,1,"Homer, Mr. Harry (""Mr E Haven"")",male,35,0,0,111426,26.55,,C
+606,0,3,"Lindell, Mr. Edvard Bengtsson",male,36,1,0,349910,15.55,,S
+607,0,3,"Karaic, Mr. Milan",male,30,0,0,349246,7.8958,,S
+608,1,1,"Daniel, Mr. Robert Williams",male,27,0,0,113804,30.5,,S
+609,1,2,"Laroche, Mrs. Joseph (Juliette Marie Louise Lafargue)",female,22,1,2,SC/Paris 2123,41.5792,,C
+610,1,1,"Shutes, Miss. Elizabeth W",female,40,0,0,PC 17582,153.4625,C125,S
+611,0,3,"Andersson, Mrs. Anders Johan (Alfrida Konstantia Brogren)",female,39,1,5,347082,31.275,,S
+612,0,3,"Jardin, Mr. Jose Neto",male,,0,0,SOTON/O.Q. 3101305,7.05,,S
+613,1,3,"Murphy, Miss. Margaret Jane",female,,1,0,367230,15.5,,Q
+614,0,3,"Horgan, Mr. John",male,,0,0,370377,7.75,,Q
+615,0,3,"Brocklebank, Mr. William Alfred",male,35,0,0,364512,8.05,,S
+616,1,2,"Herman, Miss. Alice",female,24,1,2,220845,65,,S
+617,0,3,"Danbom, Mr. Ernst Gilbert",male,34,1,1,347080,14.4,,S
+618,0,3,"Lobb, Mrs. William Arthur (Cordelia K Stanlick)",female,26,1,0,A/5. 3336,16.1,,S
+619,1,2,"Becker, Miss. Marion Louise",female,4,2,1,230136,39,F4,S
+620,0,2,"Gavey, Mr. Lawrence",male,26,0,0,31028,10.5,,S
+621,0,3,"Yasbeck, Mr. Antoni",male,27,1,0,2659,14.4542,,C
+622,1,1,"Kimball, Mr. Edwin Nelson Jr",male,42,1,0,11753,52.5542,D19,S
+623,1,3,"Nakid, Mr. Sahid",male,20,1,1,2653,15.7417,,C
+624,0,3,"Hansen, Mr. Henry Damsgaard",male,21,0,0,350029,7.8542,,S
+625,0,3,"Bowen, Mr. David John ""Dai""",male,21,0,0,54636,16.1,,S
+626,0,1,"Sutton, Mr. Frederick",male,61,0,0,36963,32.3208,D50,S
+627,0,2,"Kirkland, Rev. Charles Leonard",male,57,0,0,219533,12.35,,Q
+628,1,1,"Longley, Miss. Gretchen Fiske",female,21,0,0,13502,77.9583,D9,S
+629,0,3,"Bostandyeff, Mr. Guentcho",male,26,0,0,349224,7.8958,,S
+630,0,3,"O'Connell, Mr. Patrick D",male,,0,0,334912,7.7333,,Q
+631,1,1,"Barkworth, Mr. Algernon Henry Wilson",male,80,0,0,27042,30,A23,S
+632,0,3,"Lundahl, Mr. Johan Svensson",male,51,0,0,347743,7.0542,,S
+633,1,1,"Stahelin-Maeglin, Dr. Max",male,32,0,0,13214,30.5,B50,C
+634,0,1,"Parr, Mr. William Henry Marsh",male,,0,0,112052,0,,S
+635,0,3,"Skoog, Miss. Mabel",female,9,3,2,347088,27.9,,S
+636,1,2,"Davis, Miss. Mary",female,28,0,0,237668,13,,S
+637,0,3,"Leinonen, Mr. Antti Gustaf",male,32,0,0,STON/O 2. 3101292,7.925,,S
+638,0,2,"Collyer, Mr. Harvey",male,31,1,1,C.A. 31921,26.25,,S
+639,0,3,"Panula, Mrs. Juha (Maria Emilia Ojala)",female,41,0,5,3101295,39.6875,,S
+640,0,3,"Thorneycroft, Mr. Percival",male,,1,0,376564,16.1,,S
+641,0,3,"Jensen, Mr. Hans Peder",male,20,0,0,350050,7.8542,,S
+642,1,1,"Sagesser, Mlle. Emma",female,24,0,0,PC 17477,69.3,B35,C
+643,0,3,"Skoog, Miss. Margit Elizabeth",female,2,3,2,347088,27.9,,S
+644,1,3,"Foo, Mr. Choong",male,,0,0,1601,56.4958,,S
+645,1,3,"Baclini, Miss. Eugenie",female,0.75,2,1,2666,19.2583,,C
+646,1,1,"Harper, Mr. Henry Sleeper",male,48,1,0,PC 17572,76.7292,D33,C
+647,0,3,"Cor, Mr. Liudevit",male,19,0,0,349231,7.8958,,S
+648,1,1,"Simonius-Blumer, Col. Oberst Alfons",male,56,0,0,13213,35.5,A26,C
+649,0,3,"Willey, Mr. Edward",male,,0,0,S.O./P.P. 751,7.55,,S
+650,1,3,"Stanley, Miss. Amy Zillah Elsie",female,23,0,0,CA. 2314,7.55,,S
+651,0,3,"Mitkoff, Mr. Mito",male,,0,0,349221,7.8958,,S
+652,1,2,"Doling, Miss. Elsie",female,18,0,1,231919,23,,S
+653,0,3,"Kalvik, Mr. Johannes Halvorsen",male,21,0,0,8475,8.4333,,S
+654,1,3,"O'Leary, Miss. Hanora ""Norah""",female,,0,0,330919,7.8292,,Q
+655,0,3,"Hegarty, Miss. Hanora ""Nora""",female,18,0,0,365226,6.75,,Q
+656,0,2,"Hickman, Mr. Leonard Mark",male,24,2,0,S.O.C. 14879,73.5,,S
+657,0,3,"Radeff, Mr. Alexander",male,,0,0,349223,7.8958,,S
+658,0,3,"Bourke, Mrs. John (Catherine)",female,32,1,1,364849,15.5,,Q
+659,0,2,"Eitemiller, Mr. George Floyd",male,23,0,0,29751,13,,S
+660,0,1,"Newell, Mr. Arthur Webster",male,58,0,2,35273,113.275,D48,C
+661,1,1,"Frauenthal, Dr. Henry William",male,50,2,0,PC 17611,133.65,,S
+662,0,3,"Badt, Mr. Mohamed",male,40,0,0,2623,7.225,,C
+663,0,1,"Colley, Mr. Edward Pomeroy",male,47,0,0,5727,25.5875,E58,S
+664,0,3,"Coleff, Mr. Peju",male,36,0,0,349210,7.4958,,S
+665,1,3,"Lindqvist, Mr. Eino William",male,20,1,0,STON/O 2. 3101285,7.925,,S
+666,0,2,"Hickman, Mr. Lewis",male,32,2,0,S.O.C. 14879,73.5,,S
+667,0,2,"Butler, Mr. Reginald Fenton",male,25,0,0,234686,13,,S
+668,0,3,"Rommetvedt, Mr. Knud Paust",male,,0,0,312993,7.775,,S
+669,0,3,"Cook, Mr. Jacob",male,43,0,0,A/5 3536,8.05,,S
+670,1,1,"Taylor, Mrs. Elmer Zebley (Juliet Cummins Wright)",female,,1,0,19996,52,C126,S
+671,1,2,"Brown, Mrs. Thomas William Solomon (Elizabeth Catherine Ford)",female,40,1,1,29750,39,,S
+672,0,1,"Davidson, Mr. Thornton",male,31,1,0,F.C. 12750,52,B71,S
+673,0,2,"Mitchell, Mr. Henry Michael",male,70,0,0,C.A. 24580,10.5,,S
+674,1,2,"Wilhelms, Mr. Charles",male,31,0,0,244270,13,,S
+675,0,2,"Watson, Mr. Ennis Hastings",male,,0,0,239856,0,,S
+676,0,3,"Edvardsson, Mr. Gustaf Hjalmar",male,18,0,0,349912,7.775,,S
+677,0,3,"Sawyer, Mr. Frederick Charles",male,24.5,0,0,342826,8.05,,S
+678,1,3,"Turja, Miss. Anna Sofia",female,18,0,0,4138,9.8417,,S
+679,0,3,"Goodwin, Mrs. Frederick (Augusta Tyler)",female,43,1,6,CA 2144,46.9,,S
+680,1,1,"Cardeza, Mr. Thomas Drake Martinez",male,36,0,1,PC 17755,512.3292,B51 B53 B55,C
+681,0,3,"Peters, Miss. Katie",female,,0,0,330935,8.1375,,Q
+682,1,1,"Hassab, Mr. Hammad",male,27,0,0,PC 17572,76.7292,D49,C
+683,0,3,"Olsvigen, Mr. Thor Anderson",male,20,0,0,6563,9.225,,S
+684,0,3,"Goodwin, Mr. Charles Edward",male,14,5,2,CA 2144,46.9,,S
+685,0,2,"Brown, Mr. Thomas William Solomon",male,60,1,1,29750,39,,S
+686,0,2,"Laroche, Mr. Joseph Philippe Lemercier",male,25,1,2,SC/Paris 2123,41.5792,,C
+687,0,3,"Panula, Mr. Jaako Arnold",male,14,4,1,3101295,39.6875,,S
+688,0,3,"Dakic, Mr. Branko",male,19,0,0,349228,10.1708,,S
+689,0,3,"Fischer, Mr. Eberhard Thelander",male,18,0,0,350036,7.7958,,S
+690,1,1,"Madill, Miss. Georgette Alexandra",female,15,0,1,24160,211.3375,B5,S
+691,1,1,"Dick, Mr. Albert Adrian",male,31,1,0,17474,57,B20,S
+692,1,3,"Karun, Miss. Manca",female,4,0,1,349256,13.4167,,C
+693,1,3,"Lam, Mr. Ali",male,,0,0,1601,56.4958,,S
+694,0,3,"Saad, Mr. Khalil",male,25,0,0,2672,7.225,,C
+695,0,1,"Weir, Col. John",male,60,0,0,113800,26.55,,S
+696,0,2,"Chapman, Mr. Charles Henry",male,52,0,0,248731,13.5,,S
+697,0,3,"Kelly, Mr. James",male,44,0,0,363592,8.05,,S
+698,1,3,"Mullens, Miss. Katherine ""Katie""",female,,0,0,35852,7.7333,,Q
+699,0,1,"Thayer, Mr. John Borland",male,49,1,1,17421,110.8833,C68,C
+700,0,3,"Humblen, Mr. Adolf Mathias Nicolai Olsen",male,42,0,0,348121,7.65,F G63,S
+701,1,1,"Astor, Mrs. John Jacob (Madeleine Talmadge Force)",female,18,1,0,PC 17757,227.525,C62 C64,C
+702,1,1,"Silverthorne, Mr. Spencer Victor",male,35,0,0,PC 17475,26.2875,E24,S
+703,0,3,"Barbara, Miss. Saiide",female,18,0,1,2691,14.4542,,C
+704,0,3,"Gallagher, Mr. Martin",male,25,0,0,36864,7.7417,,Q
+705,0,3,"Hansen, Mr. Henrik Juul",male,26,1,0,350025,7.8542,,S
+706,0,2,"Morley, Mr. Henry Samuel (""Mr Henry Marshall"")",male,39,0,0,250655,26,,S
+707,1,2,"Kelly, Mrs. Florence ""Fannie""",female,45,0,0,223596,13.5,,S
+708,1,1,"Calderhead, Mr. Edward Pennington",male,42,0,0,PC 17476,26.2875,E24,S
+709,1,1,"Cleaver, Miss. Alice",female,22,0,0,113781,151.55,,S
+710,1,3,"Moubarek, Master. Halim Gonios (""William George"")",male,,1,1,2661,15.2458,,C
+711,1,1,"Mayne, Mlle. Berthe Antonine (""Mrs de Villiers"")",female,24,0,0,PC 17482,49.5042,C90,C
+712,0,1,"Klaber, Mr. Herman",male,,0,0,113028,26.55,C124,S
+713,1,1,"Taylor, Mr. Elmer Zebley",male,48,1,0,19996,52,C126,S
+714,0,3,"Larsson, Mr. August Viktor",male,29,0,0,7545,9.4833,,S
+715,0,2,"Greenberg, Mr. Samuel",male,52,0,0,250647,13,,S
+716,0,3,"Soholt, Mr. Peter Andreas Lauritz Andersen",male,19,0,0,348124,7.65,F G73,S
+717,1,1,"Endres, Miss. Caroline Louise",female,38,0,0,PC 17757,227.525,C45,C
+718,1,2,"Troutt, Miss. Edwina Celia ""Winnie""",female,27,0,0,34218,10.5,E101,S
+719,0,3,"McEvoy, Mr. Michael",male,,0,0,36568,15.5,,Q
+720,0,3,"Johnson, Mr. Malkolm Joackim",male,33,0,0,347062,7.775,,S
+721,1,2,"Harper, Miss. Annie Jessie ""Nina""",female,6,0,1,248727,33,,S
+722,0,3,"Jensen, Mr. Svend Lauritz",male,17,1,0,350048,7.0542,,S
+723,0,2,"Gillespie, Mr. William Henry",male,34,0,0,12233,13,,S
+724,0,2,"Hodges, Mr. Henry Price",male,50,0,0,250643,13,,S
+725,1,1,"Chambers, Mr. Norman Campbell",male,27,1,0,113806,53.1,E8,S
+726,0,3,"Oreskovic, Mr. Luka",male,20,0,0,315094,8.6625,,S
+727,1,2,"Renouf, Mrs. Peter Henry (Lillian Jefferys)",female,30,3,0,31027,21,,S
+728,1,3,"Mannion, Miss. Margareth",female,,0,0,36866,7.7375,,Q
+729,0,2,"Bryhl, Mr. Kurt Arnold Gottfrid",male,25,1,0,236853,26,,S
+730,0,3,"Ilmakangas, Miss. Pieta Sofia",female,25,1,0,STON/O2. 3101271,7.925,,S
+731,1,1,"Allen, Miss. Elisabeth Walton",female,29,0,0,24160,211.3375,B5,S
+732,0,3,"Hassan, Mr. Houssein G N",male,11,0,0,2699,18.7875,,C
+733,0,2,"Knight, Mr. Robert J",male,,0,0,239855,0,,S
+734,0,2,"Berriman, Mr. William John",male,23,0,0,28425,13,,S
+735,0,2,"Troupiansky, Mr. Moses Aaron",male,23,0,0,233639,13,,S
+736,0,3,"Williams, Mr. Leslie",male,28.5,0,0,54636,16.1,,S
+737,0,3,"Ford, Mrs. Edward (Margaret Ann Watson)",female,48,1,3,W./C. 6608,34.375,,S
+738,1,1,"Lesurer, Mr. Gustave J",male,35,0,0,PC 17755,512.3292,B101,C
+739,0,3,"Ivanoff, Mr. Kanio",male,,0,0,349201,7.8958,,S
+740,0,3,"Nankoff, Mr. Minko",male,,0,0,349218,7.8958,,S
+741,1,1,"Hawksford, Mr. Walter James",male,,0,0,16988,30,D45,S
+742,0,1,"Cavendish, Mr. Tyrell William",male,36,1,0,19877,78.85,C46,S
+743,1,1,"Ryerson, Miss. Susan Parker ""Suzette""",female,21,2,2,PC 17608,262.375,B57 B59 B63 B66,C
+744,0,3,"McNamee, Mr. Neal",male,24,1,0,376566,16.1,,S
+745,1,3,"Stranden, Mr. Juho",male,31,0,0,STON/O 2. 3101288,7.925,,S
+746,0,1,"Crosby, Capt. Edward Gifford",male,70,1,1,WE/P 5735,71,B22,S
+747,0,3,"Abbott, Mr. Rossmore Edward",male,16,1,1,C.A. 2673,20.25,,S
+748,1,2,"Sinkkonen, Miss. Anna",female,30,0,0,250648,13,,S
+749,0,1,"Marvin, Mr. Daniel Warner",male,19,1,0,113773,53.1,D30,S
+750,0,3,"Connaghton, Mr. Michael",male,31,0,0,335097,7.75,,Q
+751,1,2,"Wells, Miss. Joan",female,4,1,1,29103,23,,S
+752,1,3,"Moor, Master. Meier",male,6,0,1,392096,12.475,E121,S
+753,0,3,"Vande Velde, Mr. Johannes Joseph",male,33,0,0,345780,9.5,,S
+754,0,3,"Jonkoff, Mr. Lalio",male,23,0,0,349204,7.8958,,S
+755,1,2,"Herman, Mrs. Samuel (Jane Laver)",female,48,1,2,220845,65,,S
+756,1,2,"Hamalainen, Master. Viljo",male,0.67,1,1,250649,14.5,,S
+757,0,3,"Carlsson, Mr. August Sigfrid",male,28,0,0,350042,7.7958,,S
+758,0,2,"Bailey, Mr. Percy Andrew",male,18,0,0,29108,11.5,,S
+759,0,3,"Theobald, Mr. Thomas Leonard",male,34,0,0,363294,8.05,,S
+760,1,1,"Rothes, the Countess. of (Lucy Noel Martha Dyer-Edwards)",female,33,0,0,110152,86.5,B77,S
+761,0,3,"Garfirth, Mr. John",male,,0,0,358585,14.5,,S
+762,0,3,"Nirva, Mr. Iisakki Antino Aijo",male,41,0,0,SOTON/O2 3101272,7.125,,S
+763,1,3,"Barah, Mr. Hanna Assi",male,20,0,0,2663,7.2292,,C
+764,1,1,"Carter, Mrs. William Ernest (Lucile Polk)",female,36,1,2,113760,120,B96 B98,S
+765,0,3,"Eklund, Mr. Hans Linus",male,16,0,0,347074,7.775,,S
+766,1,1,"Hogeboom, Mrs. John C (Anna Andrews)",female,51,1,0,13502,77.9583,D11,S
+767,0,1,"Brewe, Dr. Arthur Jackson",male,,0,0,112379,39.6,,C
+768,0,3,"Mangan, Miss. Mary",female,30.5,0,0,364850,7.75,,Q
+769,0,3,"Moran, Mr. Daniel J",male,,1,0,371110,24.15,,Q
+770,0,3,"Gronnestad, Mr. Daniel Danielsen",male,32,0,0,8471,8.3625,,S
+771,0,3,"Lievens, Mr. Rene Aime",male,24,0,0,345781,9.5,,S
+772,0,3,"Jensen, Mr. Niels Peder",male,48,0,0,350047,7.8542,,S
+773,0,2,"Mack, Mrs. (Mary)",female,57,0,0,S.O./P.P. 3,10.5,E77,S
+774,0,3,"Elias, Mr. Dibo",male,,0,0,2674,7.225,,C
+775,1,2,"Hocking, Mrs. Elizabeth (Eliza Needs)",female,54,1,3,29105,23,,S
+776,0,3,"Myhrman, Mr. Pehr Fabian Oliver Malkolm",male,18,0,0,347078,7.75,,S
+777,0,3,"Tobin, Mr. Roger",male,,0,0,383121,7.75,F38,Q
+778,1,3,"Emanuel, Miss. Virginia Ethel",female,5,0,0,364516,12.475,,S
+779,0,3,"Kilgannon, Mr. Thomas J",male,,0,0,36865,7.7375,,Q
+780,1,1,"Robert, Mrs. Edward Scott (Elisabeth Walton McMillan)",female,43,0,1,24160,211.3375,B3,S
+781,1,3,"Ayoub, Miss. Banoura",female,13,0,0,2687,7.2292,,C
+782,1,1,"Dick, Mrs. Albert Adrian (Vera Gillespie)",female,17,1,0,17474,57,B20,S
+783,0,1,"Long, Mr. Milton Clyde",male,29,0,0,113501,30,D6,S
+784,0,3,"Johnston, Mr. Andrew G",male,,1,2,W./C. 6607,23.45,,S
+785,0,3,"Ali, Mr. William",male,25,0,0,SOTON/O.Q. 3101312,7.05,,S
+786,0,3,"Harmer, Mr. Abraham (David Lishin)",male,25,0,0,374887,7.25,,S
+787,1,3,"Sjoblom, Miss. Anna Sofia",female,18,0,0,3101265,7.4958,,S
+788,0,3,"Rice, Master. George Hugh",male,8,4,1,382652,29.125,,Q
+789,1,3,"Dean, Master. Bertram Vere",male,1,1,2,C.A. 2315,20.575,,S
+790,0,1,"Guggenheim, Mr. Benjamin",male,46,0,0,PC 17593,79.2,B82 B84,C
+791,0,3,"Keane, Mr. Andrew ""Andy""",male,,0,0,12460,7.75,,Q
+792,0,2,"Gaskell, Mr. Alfred",male,16,0,0,239865,26,,S
+793,0,3,"Sage, Miss. Stella Anna",female,,8,2,CA. 2343,69.55,,S
+794,0,1,"Hoyt, Mr. William Fisher",male,,0,0,PC 17600,30.6958,,C
+795,0,3,"Dantcheff, Mr. Ristiu",male,25,0,0,349203,7.8958,,S
+796,0,2,"Otter, Mr. Richard",male,39,0,0,28213,13,,S
+797,1,1,"Leader, Dr. Alice (Farnham)",female,49,0,0,17465,25.9292,D17,S
+798,1,3,"Osman, Mrs. Mara",female,31,0,0,349244,8.6833,,S
+799,0,3,"Ibrahim Shawah, Mr. Yousseff",male,30,0,0,2685,7.2292,,C
+800,0,3,"Van Impe, Mrs. Jean Baptiste (Rosalie Paula Govaert)",female,30,1,1,345773,24.15,,S
+801,0,2,"Ponesell, Mr. Martin",male,34,0,0,250647,13,,S
+802,1,2,"Collyer, Mrs. Harvey (Charlotte Annie Tate)",female,31,1,1,C.A. 31921,26.25,,S
+803,1,1,"Carter, Master. William Thornton II",male,11,1,2,113760,120,B96 B98,S
+804,1,3,"Thomas, Master. Assad Alexander",male,0.42,0,1,2625,8.5167,,C
+805,1,3,"Hedman, Mr. Oskar Arvid",male,27,0,0,347089,6.975,,S
+806,0,3,"Johansson, Mr. Karl Johan",male,31,0,0,347063,7.775,,S
+807,0,1,"Andrews, Mr. Thomas Jr",male,39,0,0,112050,0,A36,S
+808,0,3,"Pettersson, Miss. Ellen Natalia",female,18,0,0,347087,7.775,,S
+809,0,2,"Meyer, Mr. August",male,39,0,0,248723,13,,S
+810,1,1,"Chambers, Mrs. Norman Campbell (Bertha Griggs)",female,33,1,0,113806,53.1,E8,S
+811,0,3,"Alexander, Mr. William",male,26,0,0,3474,7.8875,,S
+812,0,3,"Lester, Mr. James",male,39,0,0,A/4 48871,24.15,,S
+813,0,2,"Slemen, Mr. Richard James",male,35,0,0,28206,10.5,,S
+814,0,3,"Andersson, Miss. Ebba Iris Alfrida",female,6,4,2,347082,31.275,,S
+815,0,3,"Tomlin, Mr. Ernest Portage",male,30.5,0,0,364499,8.05,,S
+816,0,1,"Fry, Mr. Richard",male,,0,0,112058,0,B102,S
+817,0,3,"Heininen, Miss. Wendla Maria",female,23,0,0,STON/O2. 3101290,7.925,,S
+818,0,2,"Mallet, Mr. Albert",male,31,1,1,S.C./PARIS 2079,37.0042,,C
+819,0,3,"Holm, Mr. John Fredrik Alexander",male,43,0,0,C 7075,6.45,,S
+820,0,3,"Skoog, Master. Karl Thorsten",male,10,3,2,347088,27.9,,S
+821,1,1,"Hays, Mrs. Charles Melville (Clara Jennings Gregg)",female,52,1,1,12749,93.5,B69,S
+822,1,3,"Lulic, Mr. Nikola",male,27,0,0,315098,8.6625,,S
+823,0,1,"Reuchlin, Jonkheer. John George",male,38,0,0,19972,0,,S
+824,1,3,"Moor, Mrs. (Beila)",female,27,0,1,392096,12.475,E121,S
+825,0,3,"Panula, Master. Urho Abraham",male,2,4,1,3101295,39.6875,,S
+826,0,3,"Flynn, Mr. John",male,,0,0,368323,6.95,,Q
+827,0,3,"Lam, Mr. Len",male,,0,0,1601,56.4958,,S
+828,1,2,"Mallet, Master. Andre",male,1,0,2,S.C./PARIS 2079,37.0042,,C
+829,1,3,"McCormack, Mr. Thomas Joseph",male,,0,0,367228,7.75,,Q
+830,1,1,"Stone, Mrs. George Nelson (Martha Evelyn)",female,62,0,0,113572,80,B28,
+831,1,3,"Yasbeck, Mrs. Antoni (Selini Alexander)",female,15,1,0,2659,14.4542,,C
+832,1,2,"Richards, Master. George Sibley",male,0.83,1,1,29106,18.75,,S
+833,0,3,"Saad, Mr. Amin",male,,0,0,2671,7.2292,,C
+834,0,3,"Augustsson, Mr. Albert",male,23,0,0,347468,7.8542,,S
+835,0,3,"Allum, Mr. Owen George",male,18,0,0,2223,8.3,,S
+836,1,1,"Compton, Miss. Sara Rebecca",female,39,1,1,PC 17756,83.1583,E49,C
+837,0,3,"Pasic, Mr. Jakob",male,21,0,0,315097,8.6625,,S
+838,0,3,"Sirota, Mr. Maurice",male,,0,0,392092,8.05,,S
+839,1,3,"Chip, Mr. Chang",male,32,0,0,1601,56.4958,,S
+840,1,1,"Marechal, Mr. Pierre",male,,0,0,11774,29.7,C47,C
+841,0,3,"Alhomaki, Mr. Ilmari Rudolf",male,20,0,0,SOTON/O2 3101287,7.925,,S
+842,0,2,"Mudd, Mr. Thomas Charles",male,16,0,0,S.O./P.P. 3,10.5,,S
+843,1,1,"Serepeca, Miss. Augusta",female,30,0,0,113798,31,,C
+844,0,3,"Lemberopolous, Mr. Peter L",male,34.5,0,0,2683,6.4375,,C
+845,0,3,"Culumovic, Mr. Jeso",male,17,0,0,315090,8.6625,,S
+846,0,3,"Abbing, Mr. Anthony",male,42,0,0,C.A. 5547,7.55,,S
+847,0,3,"Sage, Mr. Douglas Bullen",male,,8,2,CA. 2343,69.55,,S
+848,0,3,"Markoff, Mr. Marin",male,35,0,0,349213,7.8958,,C
+849,0,2,"Harper, Rev. John",male,28,0,1,248727,33,,S
+850,1,1,"Goldenberg, Mrs. Samuel L (Edwiga Grabowska)",female,,1,0,17453,89.1042,C92,C
+851,0,3,"Andersson, Master. Sigvard Harald Elias",male,4,4,2,347082,31.275,,S
+852,0,3,"Svensson, Mr. Johan",male,74,0,0,347060,7.775,,S
+853,0,3,"Boulos, Miss. Nourelain",female,9,1,1,2678,15.2458,,C
+854,1,1,"Lines, Miss. Mary Conover",female,16,0,1,PC 17592,39.4,D28,S
+855,0,2,"Carter, Mrs. Ernest Courtenay (Lilian Hughes)",female,44,1,0,244252,26,,S
+856,1,3,"Aks, Mrs. Sam (Leah Rosen)",female,18,0,1,392091,9.35,,S
+857,1,1,"Wick, Mrs. George Dennick (Mary Hitchcock)",female,45,1,1,36928,164.8667,,S
+858,1,1,"Daly, Mr. Peter Denis ",male,51,0,0,113055,26.55,E17,S
+859,1,3,"Baclini, Mrs. Solomon (Latifa Qurban)",female,24,0,3,2666,19.2583,,C
+860,0,3,"Razi, Mr. Raihed",male,,0,0,2629,7.2292,,C
+861,0,3,"Hansen, Mr. Claus Peter",male,41,2,0,350026,14.1083,,S
+862,0,2,"Giles, Mr. Frederick Edward",male,21,1,0,28134,11.5,,S
+863,1,1,"Swift, Mrs. Frederick Joel (Margaret Welles Barron)",female,48,0,0,17466,25.9292,D17,S
+864,0,3,"Sage, Miss. Dorothy Edith ""Dolly""",female,,8,2,CA. 2343,69.55,,S
+865,0,2,"Gill, Mr. John William",male,24,0,0,233866,13,,S
+866,1,2,"Bystrom, Mrs. (Karolina)",female,42,0,0,236852,13,,S
+867,1,2,"Duran y More, Miss. Asuncion",female,27,1,0,SC/PARIS 2149,13.8583,,C
+868,0,1,"Roebling, Mr. Washington Augustus II",male,31,0,0,PC 17590,50.4958,A24,S
+869,0,3,"van Melkebeke, Mr. Philemon",male,,0,0,345777,9.5,,S
+870,1,3,"Johnson, Master. Harold Theodor",male,4,1,1,347742,11.1333,,S
+871,0,3,"Balkic, Mr. Cerin",male,26,0,0,349248,7.8958,,S
+872,1,1,"Beckwith, Mrs. Richard Leonard (Sallie Monypeny)",female,47,1,1,11751,52.5542,D35,S
+873,0,1,"Carlsson, Mr. Frans Olof",male,33,0,0,695,5,B51 B53 B55,S
+874,0,3,"Vander Cruyssen, Mr. Victor",male,47,0,0,345765,9,,S
+875,1,2,"Abelson, Mrs. Samuel (Hannah Wizosky)",female,28,1,0,P/PP 3381,24,,C
+876,1,3,"Najib, Miss. Adele Kiamie ""Jane""",female,15,0,0,2667,7.225,,C
+877,0,3,"Gustafsson, Mr. Alfred Ossian",male,20,0,0,7534,9.8458,,S
+878,0,3,"Petroff, Mr. Nedelio",male,19,0,0,349212,7.8958,,S
+879,0,3,"Laleff, Mr. Kristo",male,,0,0,349217,7.8958,,S
+880,1,1,"Potter, Mrs. Thomas Jr (Lily Alexenia Wilson)",female,56,0,1,11767,83.1583,C50,C
+881,1,2,"Shelley, Mrs. William (Imanita Parrish Hall)",female,25,0,1,230433,26,,S
+882,0,3,"Markun, Mr. Johann",male,33,0,0,349257,7.8958,,S
+883,0,3,"Dahlberg, Miss. Gerda Ulrika",female,22,0,0,7552,10.5167,,S
+884,0,2,"Banfield, Mr. Frederick James",male,28,0,0,C.A./SOTON 34068,10.5,,S
+885,0,3,"Sutehall, Mr. Henry Jr",male,25,0,0,SOTON/OQ 392076,7.05,,S
+886,0,3,"Rice, Mrs. William (Margaret Norton)",female,39,0,5,382652,29.125,,Q
+887,0,2,"Montvila, Rev. Juozas",male,27,0,0,211536,13,,S
+888,1,1,"Graham, Miss. Margaret Edith",female,19,0,0,112053,30,B42,S
+889,0,3,"Johnston, Miss. Catherine Helen ""Carrie""",female,,1,2,W./C. 6607,23.45,,S
+890,1,1,"Behr, Mr. Karl Howell",male,26,0,0,111369,30,C148,C
+891,0,3,"Dooley, Mr. Patrick",male,32,0,0,370376,7.75,,Q

demo/dataset/run.py

@@ -0,0 +1,180 @@
+import gradio as gr
+import os
+import numpy as np
+
+
+txt = "the quick brown fox"
+num = 10
+
+img = os.path.join(os.path.dirname(__file__), "files/cheetah1.jpg")
+vid = os.path.join(os.path.dirname(__file__), "files/world.mp4")
+audio = os.path.join(os.path.dirname(__file__), "files/cantina.wav")
+csv = os.path.join(os.path.dirname(__file__), "files/time.csv")
+model = os.path.join(os.path.dirname(__file__), "files/Bunny.obj")
+
+dataframe = [[1, 2, 3, 4], [4, 5, 6, 7], [8, 9, 1, 2], [3, 4, 5, 6]]
+
+with gr.Blocks() as demo:
+    gr.Markdown("# Dataset previews")
+    a = gr.Audio(visible=False)
+    gr.Dataset(
+        components=[a],
+        label="Audio",
+        samples=[
+            [audio],
+            [audio],
+            [audio],
+            [audio],
+            [audio],
+            [audio],
+        ],
+    )
+    c = gr.Checkbox(visible=False)
+    gr.Dataset(
+        label="Checkbox",
+        components=[c],
+        samples=[[True], [True], [False], [True], [False], [False]],
+    )
+
+    c_2 = gr.CheckboxGroup(visible=False)
+    gr.Dataset(
+        label="CheckboxGroup",
+        components=[c_2],
+        samples=[
+            [[True, True, False]],
+            [[True, True, False]],
+            [[True, True, False]],
+            [[True, True, False]],
+            [[True, True, False]],
+            [[True, True, False]],
+        ],
+    )
+    c_3 = gr.ColorPicker(visible=False)
+    gr.Dataset(
+        label="ColorPicker",
+        components=[c_3],
+        samples=[
+            ["#FFFFFF"],
+            ["#000000"],
+            ["#FFFFFF"],
+            ["#000000"],
+            ["#FFFFFF"],
+            ["#000000"],
+        ],
+    )
+    d = gr.DataFrame(visible=False)
+    gr.Dataset(
+        components=[d],
+        label="Dataframe",
+        samples=[
+            [np.zeros((3, 3)).tolist()],
+            [np.ones((2, 2)).tolist()],
+            [np.random.randint(0, 10, (3, 10)).tolist()],
+            [np.random.randint(0, 10, (10, 3)).tolist()],
+            [np.random.randint(0, 10, (10, 10)).tolist()],
+        ],
+    )
+    d_2 = gr.Dropdown(visible=False, choices=["one", "two", "three"])
+    gr.Dataset(
+        components=[d_2],
+        label="Dropdown",
+        samples=[["one"], ["two"], ["three"], ["one"], ["two"], ["three"]],
+    )
+    f = gr.File(visible=False)
+    gr.Dataset(
+        components=[f],
+        label="File",
+        samples=[
+            [csv],
+            [csv],
+            [csv],
+            [csv],
+            [csv],
+            [csv],
+        ],
+    )
+    h = gr.HTML(visible=False)
+    gr.Dataset(
+        components=[h],
+        label="HTML",
+        samples=[
+            ["<h1>hi</h2>"],
+            ["<h1>hi</h2>"],
+            ["<h1>hi</h2>"],
+            ["<h1>hi</h2>"],
+            ["<h1>hi</h2>"],
+            ["<h1>hi</h2>"],
+        ],
+    )
+    i = gr.Image(visible=False)
+    gr.Dataset(
+        components=[i],
+        label="Image",
+        samples=[[img], [img], [img], [img], [img], [img]],
+    )
+    m = gr.Markdown(visible=False)
+    gr.Dataset(
+        components=[m],
+        label="Markdown",
+        samples=[
+            ["# hi"],
+            ["# hi"],
+            ["# hi"],
+            ["# hi"],
+            ["# hi"],
+            ["# hi"],
+        ],
+    )
+    m_2 = gr.Model3D(visible=False)
+    gr.Dataset(
+        components=[m_2],
+        label="Model3D",
+        samples=[[model], [model], [model], [model], [model], [model]],
+    )
+    n = gr.Number(visible=False)
+    gr.Dataset(
+        label="Number",
+        components=[n],
+        samples=[[1], [1], [1], [1], [1], [1]],
+    )
+    r = gr.Radio(visible=False, choices=["one", "two", "three"])
+    gr.Dataset(
+        components=[r],
+        label="Radio",
+        samples=[["one"], ["two"], ["three"], ["one"], ["two"], ["three"]],
+    )
+    s = gr.Slider(visible=False)
+    gr.Dataset(
+        label="Slider",
+        components=[s],
+        samples=[[1], [1], [1], [1], [1], [1]],
+    )
+    t = gr.Textbox(visible=False)
+    gr.Dataset(
+        label="Textbox",
+        components=[t],
+        samples=[
+            ["Some value"],
+            ["Some value"],
+            ["Some value"],
+            ["Some value"],
+            ["Some value"],
+            ["Some value"],
+        ],
+    )
+    t_2 = gr.TimeSeries(visible=False)
+    gr.Dataset(
+        components=[t_2],
+        label="TimeSeries",
+        samples=[[csv], [csv], [csv], [csv], [csv], [csv]],
+    )
+    v = gr.Video(visible=False)
+    gr.Dataset(
+        components=[v],
+        label="Video",
+        samples=[[vid], [vid], [vid], [vid], [vid], [vid]],
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()

demo/fake_diffusion/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: fake_diffusion\n", "### This demo uses a fake model to showcase iterative output. The Image output will update every time a generator is returned until the final image.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "import time\n", "\n", "# define core fn, which returns a generator {steps} times before returning the image\n", "def fake_diffusion(steps):\n", "    for _ in range(steps):\n", "        time.sleep(1)\n", "        image = np.random.random((600, 600, 3))\n", "        yield image\n", "\n", "    image = \"https://i.picsum.photos/id/867/600/600.jpg?hmac=qE7QFJwLmlE_WKI7zMH6SgH5iY5fx8ec6ZJQBwKRT44\" \n", "    yield image\n", "\n", "demo = gr.Interface(fake_diffusion, \n", "                    inputs=gr.Slider(1, 10, 3), \n", "                    outputs=\"image\")\n", "\n", "# define queue - required for generators\n", "demo.queue()\n", "\n", "demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: fake_diffusion\n", "### This demo uses a fake model to showcase iterative output. The Image output will update every time a generator is returned until the final image.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "import time\n", "\n", "# define core fn, which returns a generator {steps} times before returning the image\n", "def fake_diffusion(steps):\n", "    for _ in range(steps):\n", "        time.sleep(1)\n", "        image = np.random.random((600, 600, 3))\n", "        yield image\n", "\n", "    image = \"https://i.picsum.photos/id/867/600/600.jpg?hmac=qE7QFJwLmlE_WKI7zMH6SgH5iY5fx8ec6ZJQBwKRT44\"\n", "    yield image\n", "\n", "\n", "demo = gr.Interface(fake_diffusion, inputs=gr.Slider(1, 10, 3), outputs=\"image\")\n", "\n", "# define queue - required for generators\n", "demo.queue()\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/fake_diffusion/run.py

@@ -9,14 +9,13 @@ def fake_diffusion(steps):
         image = np.random.random((600, 600, 3))
         yield image
 
-    image = "https://i.picsum.photos/id/867/600/600.jpg?hmac=qE7QFJwLmlE_WKI7zMH6SgH5iY5fx8ec6ZJQBwKRT44" 
+    image = "https://i.picsum.photos/id/867/600/600.jpg?hmac=qE7QFJwLmlE_WKI7zMH6SgH5iY5fx8ec6ZJQBwKRT44"
     yield image
 
-demo = gr.Interface(fake_diffusion, 
-                    inputs=gr.Slider(1, 10, 3), 
-                    outputs="image")
+
+demo = gr.Interface(fake_diffusion, inputs=gr.Slider(1, 10, 3), outputs="image")
 
 # define queue - required for generators
 demo.queue()
 
-demo.launch()
+demo.launch()

demo/fake_gan_2/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: fake_gan_2"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/cheetah1.jpg https://github.com/gradio-app/gradio/raw/main/demo/fake_gan_2/files/cheetah1.jpg\n", "!wget -q -O files/elephant.jpg https://github.com/gradio-app/gradio/raw/main/demo/fake_gan_2/files/elephant.jpg\n", "!wget -q -O files/tiger.jpg https://github.com/gradio-app/gradio/raw/main/demo/fake_gan_2/files/tiger.jpg\n", "!wget -q -O files/zebra.jpg https://github.com/gradio-app/gradio/raw/main/demo/fake_gan_2/files/zebra.jpg"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["# This demo needs to be run from the repo folder.\n", "# python demo/fake_gan/run.py\n", "import os\n", "import random\n", "import time\n", "\n", "import gradio as gr\n", "\n", "\n", "def fake_gan(desc):\n", "    if desc == \"NSFW\":\n", "        raise gr.Error(\"NSFW - banned content.\")\n", "    if desc == \"error\":\n", "        raise ValueError(\"error\")\n", "    time.sleep(2)\n", "    image = random.choice(\n", "        [\n", "            \"files/cheetah1.jpg\",\n", "            \"files/elephant.jpg\",\n", "            \"files/tiger.jpg\",\n", "            \"files/zebra.jpg\",\n", "        ]\n", "    )\n", "    return image\n", "\n", "\n", "demo = gr.Interface(\n", "    fn=fake_gan,\n", "    inputs=gr.Textbox(),\n", "    outputs=gr.Image(label=\"Generated Image\"),\n", "    title=\"FD-GAN\",\n", "    description=\"This is a fake demo of a GAN. In reality, the images are randomly chosen from Unsplash.\",\n", ")\n", "demo.queue(max_size=3)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: fake_gan_2"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/cheetah1.jpg https://github.com/gradio-app/gradio/raw/main/demo/fake_gan_2/files/cheetah1.jpg\n", "!wget -q -O files/elephant.jpg https://github.com/gradio-app/gradio/raw/main/demo/fake_gan_2/files/elephant.jpg\n", "!wget -q -O files/tiger.jpg https://github.com/gradio-app/gradio/raw/main/demo/fake_gan_2/files/tiger.jpg\n", "!wget -q -O files/zebra.jpg https://github.com/gradio-app/gradio/raw/main/demo/fake_gan_2/files/zebra.jpg"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["# This demo needs to be run from the repo folder.\n", "# python demo/fake_gan/run.py\n", "import os\n", "import random\n", "import time\n", "\n", "import gradio as gr\n", "\n", "\n", "def fake_gan(desc):\n", "    if desc == \"NSFW\":\n", "        raise gr.Error(\"NSFW - banned content.\")\n", "    if desc == \"error\":\n", "        raise ValueError(\"error\")\n", "    time.sleep(9)\n", "    image = random.choice(\n", "        [\n", "            \"files/cheetah1.jpg\",\n", "            \"files/elephant.jpg\",\n", "            \"files/tiger.jpg\",\n", "            \"files/zebra.jpg\",\n", "        ]\n", "    )\n", "    return image\n", "\n", "\n", "demo = gr.Interface(\n", "    fn=fake_gan,\n", "    inputs=gr.Textbox(),\n", "    outputs=gr.Image(label=\"Generated Image\"),\n", "    title=\"FD-GAN\",\n", "    description=\"This is a fake demo of a GAN. In reality, the images are randomly chosen from Unsplash.\",\n", ")\n", "demo.queue(max_size=3)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/fake_gan_2/run.py

@@ -12,7 +12,7 @@ def fake_gan(desc):
         raise gr.Error("NSFW - banned content.")
     if desc == "error":
         raise ValueError("error")
-    time.sleep(2)
+    time.sleep(9)
     image = random.choice(
         [
             "files/cheetah1.jpg",

demo/kitchen_sink/run.py

@@ -83,6 +83,7 @@ def fn(
         df2,  # Timeseries
     )
 
+
 demo = gr.Interface(
     fn,
     inputs=[
@@ -92,9 +93,7 @@ demo = gr.Interface(
         gr.Slider(10, 20, value=15, label="Slider: 10 - 20"),
         gr.Slider(maximum=20, step=0.04, label="Slider: step @ 0.04"),
         gr.Checkbox(label="Checkbox"),
-        gr.CheckboxGroup(
-            label="CheckboxGroup", choices=CHOICES, value=CHOICES[0:2]
-        ),
+        gr.CheckboxGroup(label="CheckboxGroup", choices=CHOICES, value=CHOICES[0:2]),
         gr.Radio(label="Radio", choices=CHOICES, value=CHOICES[2]),
         gr.Dropdown(label="Dropdown", choices=CHOICES),
         gr.Image(label="Image"),
@@ -144,7 +143,7 @@ demo = gr.Interface(
             os.path.join(os.path.dirname(__file__), "files/cantina.wav"),
             os.path.join(os.path.dirname(__file__), "files/cantina.wav"),
             os.path.join(os.path.dirname(__file__), "files/titanic.csv"),
-            [[1, 2, 3], [3, 4, 5]],
+            [[1, 2, 3, 4], [4, 5, 6, 7], [8, 9, 1, 2], [3, 4, 5, 6]],
             os.path.join(os.path.dirname(__file__), "files/time.csv"),
         ]
     ]
@@ -153,7 +152,7 @@ demo = gr.Interface(
     title="Kitchen Sink",
     description="Try out all the components!",
     article="Learn more about [Gradio](http://gradio.app)",
-    cache_examples=True
+    cache_examples=True,
 )
 
 if __name__ == "__main__":

demo/markdown_component/run.py

@@ -1,8 +1,204 @@
-import gradio as gr 
+import gradio as gr
 
-css = "footer {display: none !important;} .gradio-container {min-height: 0px !important;}"
+css = (
+    "footer {display: none !important;} .gradio-container {min-height: 0px !important;}"
+)
 
+# sample md stolen from https://dillinger.io/
+
+md = """# Dillinger
+## _The Last Markdown Editor, Ever_
+
+[![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://travis-ci.org/joemccann/dillinger)
+
+Dillinger is a cloud-enabled, mobile-ready, offline-storage compatible,
+AngularJS-powered HTML5 Markdown editor.
+
+- Type some Markdown on the left
+- See HTML in the right
+- ✨Magic ✨
+
+## Features
+
+- Import a HTML file and watch it magically convert to Markdown
+- Drag and drop images (requires your Dropbox account be linked)
+- Import and save files from GitHub, Dropbox, Google Drive and One Drive
+- Drag and drop markdown and HTML files into Dillinger
+- Export documents as Markdown, HTML and PDF
+
+Markdown is a lightweight markup language based on the formatting conventions
+that people naturally use in email.
+As [John Gruber] writes on the [Markdown site][df1]
+
+> The overriding design goal for Markdown's
+> formatting syntax is to make it as readable
+> as possible. The idea is that a
+> Markdown-formatted document should be
+> publishable as-is, as plain text, without
+> looking like it's been marked up with tags
+> or formatting instructions.
+
+This text you see here is *actually- written in Markdown! To get a feel
+for Markdown's syntax, type some text into the left window and
+watch the results in the right.
+
+## Tech
+
+Dillinger uses a number of open source projects to work properly:
+
+- [AngularJS] - HTML enhanced for web apps!
+- [Ace Editor] - awesome web-based text editor
+- [markdown-it] - Markdown parser done right. Fast and easy to extend.
+- [Twitter Bootstrap] - great UI boilerplate for modern web apps
+- [node.js] - evented I/O for the backend
+- [Express] - fast node.js network app framework [@tjholowaychuk]
+- [Gulp] - the streaming build system
+- [Breakdance](https://breakdance.github.io/breakdance/) - HTML
+to Markdown converter
+- [jQuery] - duh
+
+And of course Dillinger itself is open source with a [public repository][dill]
+ on GitHub.
+
+## Installation
+
+Dillinger requires [Node.js](https://nodejs.org/) v10+ to run.
+
+Install the dependencies and devDependencies and start the server.
+
+```sh
+cd dillinger
+npm i
+node app
+```
+
+For production environments...
+
+```sh
+npm install --production
+NODE_ENV=production node app
+```
+
+## Plugins
+
+Dillinger is currently extended with the following plugins.
+Instructions on how to use them in your own application are linked below.
+
+| Plugin | README |
+| ------ | ------ |
+| Dropbox | [plugins/dropbox/README.md][PlDb] |
+| GitHub | [plugins/github/README.md][PlGh] |
+| Google Drive | [plugins/googledrive/README.md][PlGd] |
+| OneDrive | [plugins/onedrive/README.md][PlOd] |
+| Medium | [plugins/medium/README.md][PlMe] |
+| Google Analytics | [plugins/googleanalytics/README.md][PlGa] |
+
+## Development
+
+Want to contribute? Great!
+
+Dillinger uses Gulp + Webpack for fast developing.
+Make a change in your file and instantaneously see your updates!
+
+Open your favorite Terminal and run these commands.
+
+First Tab:
+
+```sh
+node app
+```
+
+Second Tab:
+
+```sh
+gulp watch
+```
+
+(optional) Third:
+
+```sh
+karma test
+```
+
+#### Building for source
+
+For production release:
+
+```sh
+gulp build --prod
+```
+
+Generating pre-built zip archives for distribution:
+
+```sh
+gulp build dist --prod
+```
+
+## Docker
+
+Dillinger is very easy to install and deploy in a Docker container.
+
+By default, the Docker will expose port 8080, so change this within the
+Dockerfile if necessary. When ready, simply use the Dockerfile to
+build the image.
+
+```sh
+cd dillinger
+docker build -t <youruser>/dillinger:${package.json.version} .
+```
+
+This will create the dillinger image and pull in the necessary dependencies.
+Be sure to swap out `${package.json.version}` with the actual
+version of Dillinger.
+
+Once done, run the Docker image and map the port to whatever you wish on
+your host. In this example, we simply map port 8000 of the host to
+port 8080 of the Docker (or whatever port was exposed in the Dockerfile):
+
+```sh
+docker run -d -p 8000:8080 --restart=always --cap-add=SYS_ADMIN --name=dillinger <youruser>/dillinger:${package.json.version}
+```
+
+> Note: `--capt-add=SYS-ADMIN` is required for PDF rendering.
+
+Verify the deployment by navigating to your server address in
+your preferred browser.
+
+```sh
+127.0.0.1:8000
+```
+
+## License
+
+MIT
+
+**Free Software, Hell Yeah!**
+
+[//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job. There is no need to format nicely because it shouldn't be seen. Thanks SO - http://stackoverflow.com/questions/4823468/store-comments-in-markdown-syntax)
+
+   [dill]: <https://github.com/joemccann/dillinger>
+   [git-repo-url]: <https://github.com/joemccann/dillinger.git>
+   [john gruber]: <http://daringfireball.net>
+   [df1]: <http://daringfireball.net/projects/markdown/>
+   [markdown-it]: <https://github.com/markdown-it/markdown-it>
+   [Ace Editor]: <http://ace.ajax.org>
+   [node.js]: <http://nodejs.org>
+   [Twitter Bootstrap]: <http://twitter.github.com/bootstrap/>
+   [jQuery]: <http://jquery.com>
+   [@tjholowaychuk]: <http://twitter.com/tjholowaychuk>
+   [express]: <http://expressjs.com>
+   [AngularJS]: <http://angularjs.org>
+   [Gulp]: <http://gulpjs.com>
+
+   [PlDb]: <https://github.com/joemccann/dillinger/tree/master/plugins/dropbox/README.md>
+   [PlGh]: <https://github.com/joemccann/dillinger/tree/master/plugins/github/README.md>
+   [PlGd]: <https://github.com/joemccann/dillinger/tree/master/plugins/googledrive/README.md>
+   [PlOd]: <https://github.com/joemccann/dillinger/tree/master/plugins/onedrive/README.md>
+   [PlMe]: <https://github.com/joemccann/dillinger/tree/master/plugins/medium/README.md>
+   [PlGa]: <https://github.com/RahulHP/dillinger/blob/master/plugins/googleanalytics/README.md>
+
+"""
 with gr.Blocks(css=css) as demo:
-    gr.Markdown(value="This _example_ was **written** in [Markdown](https://en.wikipedia.org/wiki/Markdown)\n")
+    gr.Markdown(value=md)
 
-demo.launch()
+demo.launch()

demo/zip_files/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: zip_files"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/titanic.csv https://github.com/gradio-app/gradio/raw/main/demo/zip_files/files/titanic.csv"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import os\n", "from zipfile import ZipFile\n", "\n", "import gradio as gr\n", "\n", "\n", "def zip_files(files):\n", "    with ZipFile(\"tmp.zip\", \"w\") as zipObj:\n", "        for idx, file in enumerate(files):\n", "            zipObj.write(file.name, \"file\" + str(idx))\n", "    return \"tmp.zip\"\n", "\n", "demo = gr.Interface(\n", "    zip_files,\n", "    gr.File(file_count=\"multiple\", file_types=[\"text\", \".json\", \".csv\"]),\n", "    \"file\",\n", "    examples=[[[os.path.join(os.path.abspath(''),\"files/titanic.csv\"), \n", "    os.path.join(os.path.abspath(''),\"files/titanic.csv\"), \n", "    os.path.join(os.path.abspath(''),\"files/titanic.csv\")]]], \n", "    cache_examples=True\n", ")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: zip_files"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/titanic.csv https://github.com/gradio-app/gradio/raw/main/demo/zip_files/files/titanic.csv\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/zip_files/tmp.zip"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import os\n", "from zipfile import ZipFile\n", "\n", "import gradio as gr\n", "\n", "\n", "def zip_files(files):\n", "    with ZipFile(\"tmp.zip\", \"w\") as zipObj:\n", "        for idx, file in enumerate(files):\n", "            zipObj.write(file.name, \"file\" + str(idx))\n", "    return \"tmp.zip\"\n", "\n", "demo = gr.Interface(\n", "    zip_files,\n", "    gr.File(file_count=\"multiple\", file_types=[\"text\", \".json\", \".csv\"]),\n", "    \"file\",\n", "    examples=[[[os.path.join(os.path.abspath(''),\"files/titanic.csv\"), \n", "    os.path.join(os.path.abspath(''),\"files/titanic.csv\"), \n", "    os.path.join(os.path.abspath(''),\"files/titanic.csv\")]]], \n", "    cache_examples=True\n", ")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

gradio/components.py

@@ -2838,6 +2838,9 @@ class Timeseries(Changeable, IOComponent, JSONSerializable):
             **kwargs,
         )
 
+    def as_example(self, input_data: str | None) -> str:
+        return Path(input_data).name if input_data else ""
+
 
 @document()
 class State(IOComponent, SimpleSerializable):
@@ -3960,7 +3963,7 @@ class Model3D(
             visible: If False, component will be hidden.
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
         """
-        self.clear_color = clear_color or [0.2, 0.2, 0.2, 1.0]
+        self.clear_color = clear_color or [0, 0, 0, 0]
         TempFileManager.__init__(self)
         IOComponent.__init__(
             self,

guides/06_other_tutorials/creating_a_new_component.md

@@ -230,7 +230,7 @@ Let's see the steps you need to follow to create the frontend of your new compon
 		dispatch("change", val);
 	}
 
-	$: ({ classes } = get_styles(style, ["rounded", "border"]));
+	$: ({ styles } = get_styles(style, ["rounded", "border"]));
 </script>
 
 <!-- svelte-ignore a11y-label-has-associated-control -->

test/requirements.txt

@@ -1,6 +1,6 @@
 #
-# This file is autogenerated by pip-compile with python 3.8
-# To update, run:
+# This file is autogenerated by pip-compile with Python 3.10
+# by the following command:
 #
 #    pip-compile --output-file=requirements.txt
 #
@@ -108,14 +108,7 @@ idna==3.3
 imageio==2.19.5
     # via scikit-image
 importlib-metadata==4.2.0
-    # via
-    #   alembic
-    #   flask
-    #   mlflow
-importlib-resources==5.8.0
-    # via
-    #   alembic
-    #   jsonschema
+    # via mlflow
 iniconfig==1.1.1
     # via pytest
 ipython==7.34.0
@@ -351,6 +344,7 @@ torch==1.12.0
     # via -r requirements.in
 tqdm==4.64.0
     # via
+    #   -r requirements.in
     #   huggingface-hub
     #   shap
     #   transformers
@@ -362,10 +356,8 @@ transformers==4.20.1
     # via -r requirements.in
 typing-extensions==4.3.0
     # via
-    #   black
     #   huggingface-hub
     #   pydantic
-    #   starlette
     #   torch
 urllib3==1.26.10
     # via
@@ -389,9 +381,7 @@ wrapt==1.14.1
 wurlitzer==3.0.2
     # via comet-ml
 zipp==3.8.1
-    # via
-    #   importlib-metadata
-    #   importlib-resources
+    # via importlib-metadata
 
 # The following packages are considered to be unsafe in a requirements file:
 # setuptools

test/test_components.py

@@ -1787,7 +1787,7 @@ class TestModel3D:
         """
         component = gr.components.Model3D(None, label="Model")
         assert {
-            "clearColor": [0.2, 0.2, 0.2, 1.0],
+            "clearColor": [0, 0, 0, 0],
             "value": None,
             "label": "Model",
             "show_label": True,

ui/.prettierrc.json

@@ -2,5 +2,7 @@
 	"useTabs": true,
 	"singleQuote": false,
 	"trailingComma": "none",
-	"printWidth": 80
+	"printWidth": 80,
+	"htmlWhitespaceSensitivity": "ignore",
+	"pluginSearchDirs": ["."]
 }

ui/package.json

@@ -4,8 +4,9 @@
 	"description": "Gradio UI packages",
 	"scripts": {
 		"workbench": "pnpm --filter @gradio/workbench dev",
-		"dev": "pnpm --filter @gradio/app dev",
-		"build": "pnpm --filter @gradio/app build:local --emptyOutDir",
+		"dev": "pnpm css && pnpm --filter @gradio/app dev",
+		"css": "pnpm --filter @gradio/theme generate",
+		"build": "pnpm css && pnpm --filter @gradio/app build:local --emptyOutDir",
 		"build:cdn": "pnpm --filter @gradio/app build:cdn --emptyOutDir",
 		"build:website": "pnpm --filter @gradio/app build:website --emptyOutDir",
 		"build:cdn-local": "TEST_CDN=TRUE pnpm build:cdn",
@@ -42,9 +43,12 @@
 		"playwright": "^1.27.1",
 		"plotly.js-dist-min": "^2.10.1",
 		"polka": "^1.0.0-next.22",
-		"postcss": "^8.4.5",
+		"pollen-css": "^4.6.1",
+		"postcss": "^8.4.6",
+		"postcss-custom-media": "8",
 		"postcss-nested": "^5.0.6",
 		"prettier": "^2.6.2",
+		"prettier-plugin-css-order": "^1.3.0",
 		"prettier-plugin-svelte": "^2.7.0",
 		"sirv": "^2.0.2",
 		"sirv-cli": "^2.0.2",

ui/packages/_cdn-test/index.html

@@ -3,9 +3,9 @@
 	<head>
 		<style>
 			html {
-				font-family: Source Sans Pro;
 				background: #111;
 				color: #eee;
+				font-family: Source Sans Pro;
 			}
 
 			p {
@@ -69,8 +69,7 @@
 			allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking"
 			src="http://127.0.0.1:7860/"
 			frameborder="0"
-		>
-		</iframe>
+		></iframe>
 		<script>
 			iFrameResize(
 				{

ui/packages/_cdn-test/style.css

@@ -1,8 +1,8 @@
 #app {
-	font-family: Avenir, Helvetica, Arial, sans-serif;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	text-align: center;
-	color: #2c3e50;
 	margin-top: 60px;
+	color: #2c3e50;
+	font-family: Avenir, Helvetica, Arial, sans-serif;
+	text-align: center;
 }

ui/packages/accordion/README.md

@@ -0,0 +1,11 @@
+# `@gradio/button`
+
+```html
+<script>
+	import { Button } from "@gradio/button";
+</script>
+
+<button type="primary|secondary" href="string" on:click="{e.detail === href}">
+	content
+</button>
+```

ui/packages/accordion/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "@gradio/carousel",
+	"name": "@gradio/accordion",
 	"version": "0.0.1",
 	"description": "Gradio UI packages",
 	"type": "module",

ui/packages/accordion/src/Accordion.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	export let label: string = "";
+	export let open: boolean = true;
+</script>
+
+<div on:click={() => (open = !open)} class="label-wrap">
+	<span>{label}</span>
+	<span style:transform={open ? "rotate(0)" : "rotate(90deg)"} class="icon">
+		▼
+	</span>
+</div>
+{#if open}
+	<slot />
+{/if}
+
+<style>
+	.label-wrap {
+		display: flex;
+		justify-content: space-between;
+		cursor: pointer;
+		width: var(--size-full);
+	}
+
+	.icon {
+		transition: 150ms;
+	}
+</style>

ui/packages/accordion/src/index.ts

@@ -0,0 +1 @@
+export { default as Accordion } from "./Accordion.svelte";

ui/packages/app/build_plugins.ts

@@ -108,7 +108,8 @@ make_script("${script}");
 export function handle_ce_css(): Plugin {
 	return {
 		enforce: "post",
-		name: "custome-element-css",
+		name: "custom-element-css",
+
 		transform(code, id) {
 			if (id === "vite/preload-helper") {
 				return {

ui/packages/app/index.html

@@ -48,7 +48,7 @@
 			rel="stylesheet"
 		/>
 		<link
-			href="https://fonts.googleapis.com/css?family=IBM Plex Mono"
+			href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
 			rel="stylesheet"
 		/>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>

ui/packages/app/package.json

@@ -11,17 +11,19 @@
 		"test:snapshot": "pnpm exec playwright test snapshots/ --config=../../playwright.config.js",
 		"test:browser": "pnpm exec playwright test test/ --config=../../playwright.config.js",
 		"test:browser:full": "python test/create_demo_configs.py && pnpm exec playwright test test/ --config=../../playwright.config.js",
-		"test:browser:debug": "pnpm exec playwright test test/ --debug --config=../../playwright.config.js"
+		"test:browser:debug": "pnpm exec playwright test test/ --debug --config=../../playwright.config.js",
+		"build:css": "pollen -c pollen.config.cjs -o src/pollen-dev.css"
 	},
 	"dependencies": {
+		"@gradio/accordion": "workspace:^0.0.1",
 		"@gradio/atoms": "workspace:^0.0.1",
 		"@gradio/audio": "workspace:^0.0.1",
 		"@gradio/button": "workspace:^0.0.1",
-		"@gradio/carousel": "workspace:^0.0.1",
 		"@gradio/chart": "workspace:^0.0.1",
 		"@gradio/chatbot": "workspace:^0.0.1",
 		"@gradio/file": "workspace:^0.0.1",
 		"@gradio/form": "workspace:^0.0.1",
+		"@gradio/gallery": "workspace:^0.0.1",
 		"@gradio/highlighted-text": "workspace:^0.0.1",
 		"@gradio/html": "workspace:^0.0.1",
 		"@gradio/icons": "workspace:^0.0.1",
@@ -35,7 +37,7 @@
 		"@gradio/tabs": "workspace:^0.0.1",
 		"@gradio/theme": "workspace:^0.0.1",
 		"@gradio/upload": "workspace:^0.0.1",
-		"@gradio/uploadbutton": "workspace:^0.0.1",
+		"@gradio/upload-button": "workspace:^0.0.1",
 		"@gradio/utils": "workspace:^0.0.1",
 		"@gradio/video": "workspace:^0.0.1",
 		"d3-dsv": "^3.0.1",

ui/packages/app/postcss.config.js

@@ -1,4 +1,4 @@
 module.exports = {
 	extract: "themes.css",
-	plugins: [require("tailwindcss/nesting"), require("tailwindcss")]
+	plugins: [custom_media]
 };

ui/packages/app/src/ApiDocs.svelte

@@ -1,411 +0,0 @@
-<script lang="ts">
-	import { onMount, createEventDispatcher } from "svelte";
-	import type { ComponentMeta, Dependency } from "./components/types";
-	import { post_data } from "./api";
-	import Loader from "./components/StatusTracker/Loader.svelte";
-	import api_logo from "/static/img/api-logo.svg";
-	import clear from "/static/img/clear.svg";
-	import python from "/static/img/python.svg";
-	import javascript from "/static/img/javascript.svg";
-
-	const dispatch = createEventDispatcher();
-
-	onMount(() => {
-		document.body.style.overflow = "hidden";
-		return () => {
-			document.body.style.overflow = "auto";
-		};
-	});
-
-	export let instance_map: {
-		[id: number]: ComponentMeta;
-	};
-	export let dependencies: Array<Dependency>;
-	export let root: string;
-
-	if (root === "") {
-		root = location.protocol + "//" + location.host + location.pathname;
-	}
-	if (!root.endsWith("/")) {
-		root += "/";
-	}
-
-	let current_language = "python";
-	let just_copied = -1;
-	let isRunning = false;
-
-	let dependency_inputs = dependencies.map((dependency) =>
-		dependency.inputs.map((_id) => {
-			let default_data = instance_map[_id].documentation?.example_data;
-			if (default_data === undefined) {
-				default_data = "";
-			} else if (typeof default_data === "object") {
-				default_data = JSON.stringify(default_data);
-			}
-			return default_data;
-		})
-	);
-	let dependency_outputs: any[][] = dependencies.map(
-		(dependency) => new Array(dependency.outputs.length)
-	);
-	let dependency_failures: boolean[][] = dependencies.map((dependency) =>
-		new Array(dependency.inputs.length).fill(false)
-	);
-	let active_api_count = dependencies.filter((d) => d.api_name).length;
-
-	const run = async (index: number) => {
-		isRunning = true;
-		let dependency = dependencies[index];
-		let attempted_component_index = 0;
-		try {
-			var inputs = dependency_inputs[index].map((input_val, i) => {
-				attempted_component_index = i;
-				let component = instance_map[dependency.inputs[i]];
-				input_val = represent_value(input_val, component.documentation?.type);
-				dependency_failures[index][attempted_component_index] = false;
-				return input_val;
-			});
-		} catch (err) {
-			dependency_failures[index][attempted_component_index] = true;
-			isRunning = false;
-			return;
-		}
-		let [response, status_code] = await post_data(
-			`${root}run/${dependency.api_name}`,
-			{
-				data: inputs
-			}
-		);
-		isRunning = false;
-		if (status_code == 200) {
-			dependency_outputs[index] = response.data.map(
-				(output_val: any, i: number) => {
-					let component = instance_map[dependency.outputs[i]];
-					console.log(
-						component.documentation?.type,
-						output_val,
-						represent_value(output_val, component.documentation?.type, "js")
-					);
-					return represent_value(
-						output_val,
-						component.documentation?.type,
-						"js"
-					);
-				}
-			);
-		} else {
-			dependency_failures[index] = new Array(
-				dependency_failures[index].length
-			).fill(true);
-		}
-	};
-
-	const represent_value = (
-		value: string,
-		type: string | undefined,
-		lang: "js" | "py" | null = null
-	) => {
-		if (type === undefined) {
-			return lang === "py" ? "None" : null;
-		}
-		if (type === "string") {
-			return lang === null ? value : '"' + value + '"';
-		} else if (type === "number") {
-			return lang === null ? parseFloat(value) : value;
-		} else if (type === "boolean") {
-			if (lang === "py") {
-				return value === "true" ? "True" : "False";
-			} else if (lang === "js") {
-				return value;
-			} else {
-				return value === "true";
-			}
-		} else {
-			// assume object type
-			if (lang === null) {
-				return value === "" ? null : JSON.parse(value);
-			} else if (typeof value === "string") {
-				if (value === "") {
-					return lang === "py" ? "None" : "null";
-				}
-				return value;
-			} else {
-				return JSON.stringify(value);
-			}
-		}
-	};
-</script>
-
-{#if active_api_count}
-	<div
-		class="px-6 py-4 border-b border-gray-100 dark:border-gray-900 relative text-sm md:text-lg"
-	>
-		<h2 class="font-semibold flex">
-			<img src={api_logo} alt="" class="w-3.5 md:w-4 mr-1 md:mr-2" />
-			API documentation for&nbsp;
-			<div class="text-orange-500">
-				{root}
-			</div>
-			<button
-				class="absolute right-6 top-5 md:top-6"
-				on:click={() => dispatch("close")}
-				><img src={clear} alt="" class="w-3 dark:invert" /></button
-			>
-		</h2>
-		{#if active_api_count > 1}
-			<div>
-				{active_api_count} API endpoints:
-			</div>
-		{/if}
-	</div>
-	<div class="flex flex-col gap-6">
-		{#each dependencies as dependency, dependency_index}
-			{#if dependency.api_name}
-				<div
-					class="bg-gradient-to-b dark:from-orange-200/5 from-orange-200/20 via-transparent to-transparent p-6 rounded"
-				>
-					<h3 class="text-lg font-bold mb-1.5">
-						<span
-							class="bg-orange-100 px-1 rounded text-sm border border-orange-200 mr-2 font-semibold text-orange-600 dark:bg-orange-400 dark:text-orange-900 dark:border-orange-600"
-							>POST</span
-						>
-						/run/{dependency.api_name}
-					</h3>
-					<div class="text-sm md:text-base mb-6 text-gray-500">
-						Endpoint: <span class="underline"
-							>{root}run/{dependency.api_name}</span
-						>
-						<button
-							class="gr-button ml-2 !py-0"
-							on:click={() => {
-								navigator.clipboard.writeText(
-									root + "run/" + dependency.api_name
-								);
-								just_copied = dependency_index;
-								setTimeout(() => {
-									just_copied = -1;
-								}, 500);
-							}}
-						>
-							{#if just_copied === dependency_index}copied!{:else}copy{/if}
-						</button>
-					</div>
-					<h4 class="font-bold mt-6 mb-3 flex items-center">
-						<div
-							class="flex items-center h-1 w-3 bg-gray-300 dark:bg-gray-500 rounded-full mr-2"
-						>
-							<div
-								class="rounded-full h-1.5 w-1.5 bg-gray-700 dark:bg-gray-400"
-							/>
-						</div>
-						Input Payload
-					</h4>
-					<div
-						class="block bg-white border dark:bg-gray-800 p-4 font-mono text-sm rounded-lg"
-					>
-						&#123;<br />
-						&nbsp;&nbsp;"data": [<br />
-						{#each dependency.inputs as component_id, component_index}
-							&nbsp;&nbsp;&nbsp;&nbsp;<input
-								class="bg-gray-100 dark:bg-gray-600 border-none w-40 px-1 py-0.5 my-0.5 text-sm rounded ring-1 ring-gray-300 dark:ring-gray-500"
-								type="text"
-								bind:value={dependency_inputs[dependency_index][
-									component_index
-								]}
-							/>
-							{#if dependency_failures[dependency_index][component_index]}
-								<span class="text-red-600">ERROR</span>
-							{/if}
-							<span class="text-gray-500">
-								: {instance_map[component_id].documentation?.type},</span
-							>
-							<span class="text-gray-400"
-								>// represents {instance_map[component_id].documentation
-									?.description} of
-								{((label) => {
-									return label ? "'" + label + "'" : "the";
-								})(instance_map[component_id].props.label)}
-
-								<span class="capitalize"
-									>{instance_map[component_id].props.name}</span
-								> component
-							</span>
-							<br />
-						{/each}
-						&nbsp;&nbsp;]<br />
-						&#125;
-					</div>
-					<button
-						on:click={run.bind(null, dependency_index)}
-						class="gr-button gr-button-lg gr-button-primary w-full mt-4"
-						>Try It Out</button
-					>
-					<h4 class="font-bold mt-6 mb-3 flex items-center">
-						<div
-							class="flex items-center h-1 w-3 bg-gray-300 dark:bg-gray-500 rounded-full mr-2"
-						>
-							<div
-								class="rounded-full h-1.5 w-1.5 bg-gray-700 dark:bg-gray-400 ml-auto"
-							/>
-						</div>
-						Response Object
-					</h4>
-					<div
-						class="bg-white border dark:bg-gray-800 p-4 font-mono text-sm rounded-lg flex flex-col"
-					>
-						<div class={isRunning ? "hidden" : ""}>
-							&#123;<br />
-							&nbsp;&nbsp;"data": [<br />
-							{#each dependency.outputs as component_id, component_index}
-								&nbsp;&nbsp;&nbsp;&nbsp;{#if dependency_outputs[dependency_index][component_index] !== undefined}
-									<input
-										disabled
-										class="bg-gray-100 dark:bg-gray-600 border-none w-40 px-1 py-0.5 my-0.5 text-sm rounded ring-1 ring-gray-300 dark:ring-gray-500"
-										type="text"
-										bind:value={dependency_outputs[dependency_index][
-											component_index
-										]}
-									/> :
-								{/if}
-								<span class="text-gray-500">
-									{instance_map[component_id].documentation?.type},
-								</span>
-								<span class="text-gray-400"
-									>// represents {instance_map[component_id].documentation
-										?.description} of
-									{((label) => {
-										return label ? "'" + label + "'" : "the";
-									})(instance_map[component_id].props.label)}
-
-									<span class="capitalize"
-										>{instance_map[component_id].props.name}</span
-									> component
-								</span>
-								<br />
-							{/each}
-							&nbsp;&nbsp;&nbsp;&nbsp;],<br />
-							&nbsp;&nbsp;&nbsp;&nbsp;"duration": (float)
-							<span class="text-gray-400">
-								// number of seconds to run function call</span
-							><br />
-							&#125;
-						</div>
-						{#if isRunning}
-							<div class="self-center justify-self-center">
-								<Loader margin={false} />
-							</div>
-						{/if}
-					</div>
-					<h4 class="font-bold mt-8 mb-3 flex items-center">
-						<svg width="1em" height="1em" viewBox="0 0 24 24" class="mr-1.5"
-							><path
-								fill="currentColor"
-								d="m8 18l-6-6l6-6l1.425 1.425l-4.6 4.6L9.4 16.6Zm8 0l-1.425-1.425l4.6-4.6L14.6 7.4L16 6l6 6Z"
-							/></svg
-						>
-						Code snippets
-					</h4>
-					<div class="flex space-x-2 items-center mb-3">
-						{#each [["python", python], ["javascript", javascript]] as [language, img]}
-							<li
-								class="flex items-center border rounded-lg px-1.5 py-1 leading-none select-none text-smd capitalize
-						{current_language === language
-									? 'border-gray-400 text-gray-800 dark:bg-gray-700'
-									: 'text-gray-400 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 hover:shadow-sm'}"
-								on:click={() => (current_language = language)}
-							>
-								<img src={img} class="mr-1.5 w-3" alt="" />
-								{language}
-							</li>
-						{/each}
-					</div>
-					<code
-						class="bg-white border dark:bg-gray-800 p-4 font-mono text-sm rounded-lg flex flex-col overflow-x-auto"
-					>
-						{#if current_language === "python"}
-							<pre>import requests
-
-response = requests.post("{root + "run/" + dependency.api_name}", json=&lbrace;
-  "data": [{#each dependency_inputs[dependency_index] as component_value, component_index}<br
-									/><!--
-									-->    {represent_value(
-										component_value,
-										instance_map[
-											dependencies[dependency_index].inputs[component_index]
-										].documentation?.type,
-										"py"
-									)},{/each}
-]&rbrace;).json()
-
-data = response["data"]</pre>
-						{:else if current_language === "javascript"}
-							<pre>fetch("{root + "run/" + dependency.api_name}", &lbrace;
-  method: "POST",
-  headers: &lbrace; "Content-Type": "application/json" &rbrace;,
-  body: JSON.stringify(&lbrace;
-    data: [{#each dependency_inputs[dependency_index] as component_value, component_index}<br
-									/><!--
-	-->      {represent_value(
-										component_value,
-										instance_map[
-											dependencies[dependency_index].inputs[component_index]
-										].documentation?.type,
-										"js"
-									)},{/each}
-	]
-  &rbrace;)&rbrace;)
-.then(r =&gt; r.json())
-.then(
-  r =&gt; &lbrace;
-    let data = r.data;
-  &rbrace;
-)</pre>
-						{:else if current_language === "gradio client"}
-							<pre class="break-words whitespace-pre-wrap">Hello World</pre>
-						{/if}
-					</code>
-				</div>
-			{/if}
-		{/each}
-	</div>
-{:else}
-	<div class="p-6">
-		<h2 class="text-lg mb-4 font-semibold">
-			No named API Routes found for
-			<span class="italic text-orange-500">
-				{root}
-			</span>
-			<button
-				class="absolute right-6 top-5 md:top-6"
-				on:click={() => dispatch("close")}
-			>
-				<img src={clear} alt="" class="w-3 dark:invert" />
-			</button>
-		</h2>
-		<div>
-			To expose an API endpoint of your app in this page, set the <span
-				class="text-gray-800 text-sm bg-gray-200/80 dark:bg-gray-600 px-1 rounded font-mono"
-			>
-				api_name
-			</span>
-			parameter of the event listener.<br /> For more information, visit the
-			<a
-				href="https://gradio.app/sharing_your_app/#api-page"
-				target="_blank"
-				class="text-orange-500 hover:text-orange-600 underline"
-				>API Page guide</a
-			>. To hide the API documentation button and this page, set
-			<span
-				class="text-gray-800 text-sm bg-gray-200/80 dark:bg-gray-600 px-1 rounded font-mono"
-			>
-				show_api=False
-			</span>
-			in the
-			<span
-				class="text-gray-800 text-sm bg-gray-200/80 dark:bg-gray-600 px-1 rounded font-mono"
-			>
-				Blocks.launch()</span
-			> method.
-		</div>
-	</div>
-{/if}

ui/packages/app/src/Blocks.svelte

@@ -18,7 +18,7 @@
 	import type { fn as api_fn } from "./api";
 	import { setupi18n } from "./i18n";
 	import Render from "./Render.svelte";
-	import ApiDocs from "./ApiDocs.svelte";
+	import { ApiDocs } from "./api_docs/";
 
 	import logo from "./images/logo.svg";
 	import api_logo from "/static/img/api-logo.svg";
@@ -404,11 +404,8 @@
 	{/if}
 </svelte:head>
 
-<div class="w-full flex flex-col" class:min-h-screen={app_mode}>
-	<div
-		class="mx-auto container px-4 py-6 dark:bg-gray-950"
-		class:flex-grow={app_mode}
-	>
+<div class="wrap" style:min-height={app_mode ? "var(--size-screen-h)" : "auto"}>
+	<div class="contain" style:flex-grow={app_mode ? "1" : "auto"}>
 		{#if ready}
 			<Render
 				has_modes={rootNode.has_modes}
@@ -426,43 +423,39 @@
 			/>
 		{/if}
 	</div>
-	<footer
-		class="flex justify-center pb-6 text-gray-400 space-x-2 text-sm md:text-base"
-	>
+	<footer>
 		{#if show_api}
 			<button
 				on:click={() => {
 					set_api_docs_visible(!api_docs_visible);
 				}}
-				class="flex items-center hover:text-gray-500"
+				class="show-api"
 			>
-				Use via API <img src={api_logo} alt="" class="w-2.5 md:w-3 mx-1" />
+				Use via API <img src={api_logo} alt="" />
 			</button>
 			<div>·</div>
 		{/if}
 		<a
 			href="https://gradio.app"
-			class="flex items-center hover:text-gray-500"
+			class="built-with"
 			target="_blank"
 			rel="noreferrer"
 		>
 			Built with Gradio
-			<img class="w-2.5 md:w-3 mx-1" src={logo} alt="logo" />
+			<img src={logo} alt="logo" />
 		</a>
 	</footer>
 </div>
 
 {#if api_docs_visible && ready}
-	<div class="h-screen w-screen fixed z-50 bg-black/50 flex top-0">
+	<div class="api-docs">
 		<div
-			class="flex-1 backdrop-blur-sm"
+			class="backdrop"
 			on:click={() => {
 				set_api_docs_visible(false);
 			}}
 		/>
-		<div
-			class="md:w-[950px] 2xl:w-[1150px] bg-white md:rounded-l-xl shadow-2xl overflow-hidden overflow-y-auto"
-		>
+		<div class="api-docs-wrap ">
 			<ApiDocs
 				on:close={() => {
 					set_api_docs_visible(false);
@@ -474,3 +467,122 @@
 		</div>
 	</div>
 {/if}
+
+<style>
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		width: var(--size-full);
+	}
+
+	.contain {
+		margin-right: auto;
+		margin-left: auto;
+		background: var(--color-background-primary);
+		padding: var(--size-6) var(--size-4);
+		width: 100%;
+	}
+
+	@media (--screen-sm) {
+		.contain {
+			max-width: 640px;
+		}
+	}
+	@media (--screen-md) {
+		.contain {
+			max-width: 768px;
+		}
+	}
+	@media (--screen-lg) {
+		.contain {
+			max-width: 1024px;
+		}
+	}
+	@media (--screen-xl) {
+		.contain {
+			max-width: 1280px;
+		}
+	}
+	@media (--screen-xxl) {
+		.contain {
+			max-width: 1536px;
+		}
+	}
+
+	footer {
+		display: flex;
+		justify-content: center;
+		padding-bottom: var(--size-6);
+		color: var(--color-text-subdued);
+		font-size: var(--scale-00);
+	}
+
+	footer > * + * {
+		margin-left: var(--size-2);
+	}
+
+	.show-api {
+		display: flex;
+		align-items: center;
+	}
+	.show-api:hover {
+		color: var(--color-text-body);
+	}
+
+	.show-api img {
+		margin-right: var(--size-1);
+		margin-left: var(--size-2);
+		width: var(--size-3);
+	}
+
+	.built-with {
+		display: flex;
+		align-items: center;
+	}
+
+	.built-with:hover {
+		color: var(--color-text-body);
+	}
+
+	.built-with img {
+		margin-right: var(--size-1);
+		margin-left: var(--size-2);
+		width: var(--size-3);
+	}
+
+	.api-docs {
+		display: flex;
+		position: fixed;
+		top: 0;
+		z-index: var(--layer-5);
+		background: rgba(0, 0, 0, 0.5);
+		width: var(--size-screen);
+		height: var(--size-screen-h);
+	}
+
+	.backdrop {
+		flex: 1 1 0%;
+		backdrop-filter: blur(4px);
+	}
+
+	.api-docs-wrap {
+		box-shadow: var(--shadow-drop-lg);
+		background: var(--color-background-primary);
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
+
+	@media (--screen-md) {
+		.api-docs-wrap {
+			border-top-left-radius: var(--radius-lg);
+			border-bottom-left-radius: var(--radius-lg);
+			width: 950px;
+		}
+	}
+
+	@media (--screen-xxl) {
+		.api-docs-wrap {
+			width: 1150px;
+		}
+	}
+</style>

ui/packages/app/src/Login.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Component as Form } from "./components/Form";
 	import { Component as Textbox } from "./components/Textbox";
+	import { Button } from "@gradio/button";
 	export let root: string;
 	export let id: number;
 	export let auth_message: string | null;
@@ -30,17 +31,14 @@
 	};
 </script>
 
-<div
-	class="dark:bg-gray-950 w-full flex flex-col items-center justify-center"
-	class:min-h-screen={app_mode}
->
-	<div class="gr-panel !p-8">
-		<h2 class="text-2xl font-semibold mb-6">Login</h2>
+<div class="wrap" class:min-h-screen={app_mode}>
+	<div class="panel">
+		<h2>Login</h2>
 		{#if auth_message}
-			<p class="my-4">{auth_message}</p>
+			<p class="auth">{auth_message}</p>
 		{/if}
 		{#if incorrect_credentials}
-			<p class="my-4 text-red-600 font-semibold">Incorrect Credentials</p>
+			<p class="creds">Incorrect Credentials</p>
 		{/if}
 		<Form>
 			<Textbox
@@ -64,9 +62,47 @@
 			/>
 		</Form>
 
-		<button
-			class="gr-button gr-button-lg gr-button-primary w-full mt-4"
-			on:click={submit}>Login</button
-		>
+		<Button size="lg" variant="primary" style={{ full_width: true }}>
+			Login
+		</Button>
 	</div>
 </div>
+
+<style>
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		background: var(--color-background-primary);
+		width: var(--size-full);
+	}
+
+	.panel {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--size-4);
+		border-radius: var(--radius-lg);
+		background: var(--color-background-secondary);
+		padding: var(--size-8);
+		width: var(--size-full);
+	}
+
+	h2 {
+		margin-bottom: var(--size-6);
+		font-weight: var(--weight-semibold);
+		font-size: var(--scale-2);
+	}
+
+	.auth {
+		margin-top: var(--size-4);
+		margin-bottom: var(--size-4);
+	}
+
+	.creds {
+		margin-top: var(--size-4);
+		margin-bottom: var(--size-4);
+		color: var(--color-functional-error-base);
+		font-weight: var(--weight-semibold);
+	}
+</style>

ui/packages/app/src/Render.svelte

@@ -47,6 +47,16 @@
 			instance_map[id].props[k] = e.detail[k];
 		}
 	}
+
+	$: {
+		if (instance_map[id].type === "form") {
+			if (children?.every((c) => !c.props.visible)) {
+				props.visible = false;
+			} else {
+				props.visible = true;
+			}
+		}
+	}
 </script>
 
 <svelte:component

ui/packages/app/src/api_docs/ApiBanner.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import api_logo from "./img/api-logo.svg";
+	import Clear from "./img/clear.svelte";
+
+	export let root: string;
+	export let active_api_count: number;
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<h2>
+	<img src={api_logo} alt="" />
+	API documentation for&nbsp;
+	<span class="url">
+		{root}
+	</span>
+</h2>
+{#if active_api_count > 1}
+	<div>
+		{active_api_count} API endpoints:
+	</div>
+{/if}
+
+<button on:click={() => dispatch("close")}>
+	<Clear />
+</button>
+
+<style>
+	h2 {
+		display: flex;
+		color: var(--color-text-body);
+		font-weight: var(--weight-semibold);
+	}
+
+	h2 img {
+		margin-right: var(--size-2);
+		width: var(--size-4);
+	}
+
+	span {
+		color: var(--color-accent-base);
+	}
+
+	button {
+		position: absolute;
+		top: var(--size-5);
+		right: var(--size-6);
+		width: var(--size-4);
+		color: var(--color-text-body);
+	}
+
+	button:hover {
+		color: var(--color-accent-base);
+	}
+
+	@media (--screen-md) {
+		button {
+			top: var(--size-6);
+		}
+
+		h2 img {
+			width: var(--size-5);
+		}
+	}
+</style>

ui/packages/app/src/api_docs/ApiDocs.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+	import { onMount, createEventDispatcher } from "svelte";
+	import type { ComponentMeta, Dependency } from "../components/types";
+	import { post_data } from "../api";
+	import NoApi from "./NoApi.svelte";
+
+	import { represent_value } from "./utils";
+
+	import ApiBanner from "./ApiBanner.svelte";
+	import EndpointDetail from "./EndpointDetail.svelte";
+	import InputPayload from "./InputPayload.svelte";
+	import ResponseObject from "./ResponseObject.svelte";
+	import CodeSnippets from "./CodeSnippets.svelte";
+
+	export let instance_map: {
+		[id: number]: ComponentMeta;
+	};
+	export let dependencies: Array<Dependency>;
+	export let root: string;
+
+	if (root === "") {
+		root = location.protocol + "//" + location.host + location.pathname;
+	}
+	if (!root.endsWith("/")) {
+		root += "/";
+	}
+
+	let current_language: "javascript" | "python" = "python";
+	let is_running = false;
+
+	let dependency_inputs = dependencies.map((dependency) =>
+		dependency.inputs.map((_id) => {
+			let default_data = instance_map[_id].documentation?.example_data;
+			if (default_data === undefined) {
+				default_data = "";
+			} else if (typeof default_data === "object") {
+				default_data = JSON.stringify(default_data);
+			}
+			return default_data;
+		})
+	);
+
+	let dependency_outputs: any[][] = dependencies.map(
+		(dependency) => new Array(dependency.outputs.length)
+	);
+
+	let dependency_failures: boolean[][] = dependencies.map((dependency) =>
+		new Array(dependency.inputs.length).fill(false)
+	);
+
+	let active_api_count = dependencies.filter((d) => d.api_name).length;
+
+	const run = async (index: number) => {
+		is_running = true;
+		let dependency = dependencies[index];
+		let attempted_component_index = 0;
+		try {
+			var inputs = dependency_inputs[index].map((input_val, i) => {
+				attempted_component_index = i;
+				let component = instance_map[dependency.inputs[i]];
+				input_val = represent_value(input_val, component.documentation?.type);
+				dependency_failures[index][attempted_component_index] = false;
+				return input_val;
+			});
+		} catch (err) {
+			dependency_failures[index][attempted_component_index] = true;
+			is_running = false;
+			return;
+		}
+		let [response, status_code] = await post_data(
+			`${root}run/${dependency.api_name}`,
+			{
+				data: inputs
+			}
+		);
+		is_running = false;
+		if (status_code == 200) {
+			dependency_outputs[index] = response.data.map(
+				(output_val: any, i: number) => {
+					let component = instance_map[dependency.outputs[i]];
+
+					return represent_value(
+						output_val,
+						component.documentation?.type,
+						"js"
+					);
+				}
+			);
+		} else {
+			dependency_failures[index] = new Array(
+				dependency_failures[index].length
+			).fill(true);
+		}
+	};
+
+	onMount(() => {
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = "auto";
+		};
+	});
+</script>
+
+{#if active_api_count}
+	<div class="banner-wrap ">
+		<ApiBanner on:close {root} {active_api_count} />
+	</div>
+	<div class="docs-wrap">
+		{#each dependencies as dependency, dependency_index}
+			{#if dependency.api_name}
+				<div class="endpoint">
+					<EndpointDetail
+						{dependency_index}
+						{root}
+						api_name={dependency.api_name}
+					/>
+
+					<InputPayload
+						{dependency}
+						{dependency_failures}
+						{dependency_index}
+						{dependency_inputs}
+						{instance_map}
+						{run}
+					/>
+
+					<ResponseObject
+						{instance_map}
+						{dependency}
+						{dependency_index}
+						{is_running}
+						{dependency_outputs}
+					/>
+					<CodeSnippets
+						{instance_map}
+						{dependency}
+						{dependency_index}
+						{current_language}
+						{root}
+						{dependency_inputs}
+						{dependencies}
+					/>
+				</div>
+			{/if}
+		{/each}
+	</div>
+{:else}
+	<NoApi {root} on:close />
+{/if}
+
+<style>
+	.banner-wrap {
+		position: relative;
+		border-bottom: 1px solid var(--color-border-primary);
+		padding: var(--size-4) var(--size-6);
+		font-size: var(--scale-00);
+	}
+
+	@media (--screen-md) {
+		.banner-wrap {
+			font-size: var(--scale-1);
+		}
+	}
+
+	.docs-wrap {
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-6);
+	}
+
+	.endpoint {
+		border-radius: var(--radius-md);
+		background: var(--api-background);
+		padding: var(--size-6);
+	}
+</style>

ui/packages/app/src/api_docs/CodeSnippets.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import type { ComponentMeta, Dependency } from "../components/types";
+	import { represent_value } from "./utils";
+
+	import python from "./img/python.svg";
+	import javascript from "./img/javascript.svg";
+
+	export let dependency: Dependency;
+	export let dependencies: Dependency[];
+	export let dependency_index: number;
+	export let instance_map: {
+		[id: number]: ComponentMeta;
+	};
+	export let root: string;
+	export let dependency_inputs: string[][];
+
+	export let current_language: "python" | "javascript";
+
+	const langs = [
+		["python", python],
+		["javascript", javascript]
+	] as const;
+</script>
+
+<h4>
+	<svg width="1em" height="1em" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="m8 18l-6-6l6-6l1.425 1.425l-4.6 4.6L9.4 16.6Zm8 0l-1.425-1.425l4.6-4.6L14.6 7.4L16 6l6 6Z"
+		/>
+	</svg>
+	Code snippets
+</h4>
+<div class="snippets">
+	{#each langs as [language, img]}
+		<li
+			class="snippet
+  {current_language === language ? 'current-lang' : 'inactive-lang'}"
+			on:click={() => (current_language = language)}
+		>
+			<img src={img} alt="" />
+			{language}
+		</li>
+	{/each}
+</div>
+<code>
+	{#if current_language === "python"}
+		<pre>import requests
+
+response = requests.post("{root + "run/" + dependency.api_name}", json=&lbrace;
+	"data": [{#each dependency_inputs[dependency_index] as component_value, component_index}<br
+				/><!--
+        -->		{represent_value(
+					component_value,
+					instance_map[dependencies[dependency_index].inputs[component_index]]
+						.documentation?.type,
+					"py"
+				)},{/each}
+	]
+&rbrace;).json()
+
+data = response["data"]</pre>
+	{:else if current_language === "javascript"}
+		<pre>const response = await fetch("{root +
+				"run/" +
+				dependency.api_name}", &lbrace;
+	method: "POST",
+	headers: &lbrace; "Content-Type": "application/json" &rbrace;,
+	body: JSON.stringify(&lbrace;
+		data: [{#each dependency_inputs[dependency_index] as component_value, component_index}<br
+				/><!--
+-->			{represent_value(
+					component_value,
+					instance_map[dependencies[dependency_index].inputs[component_index]]
+						.documentation?.type,
+					"js"
+				)},{/each}
+		]
+	&rbrace;)
+&rbrace;);
+
+const data = await data.json();
+</pre>
+	{:else if current_language === "gradio client"}
+		<pre class="client">Hello World</pre>
+	{/if}
+</code>
+
+<style>
+	h4 {
+		display: flex;
+		align-items: center;
+		margin-top: var(--size-8);
+		margin-bottom: var(--size-3);
+		color: var(--color-text-body);
+		font-weight: var(--weight-bold);
+	}
+
+	h4 svg {
+		margin-right: var(--size-1-5);
+	}
+
+	.snippets {
+		display: flex;
+		align-items: center;
+		margin-bottom: var(--size-3);
+	}
+
+	.snippets > * + * {
+		margin-left: var(--size-2);
+	}
+
+	.snippet {
+		display: flex;
+		align-items: center;
+		border: 1px solid var(--color-border-primary);
+
+		border-radius: var(--radius-md);
+		padding: var(--size-1) var(--size-1-5);
+		color: var(--color-text-subdued);
+		color: var(--color-text-body);
+		font-size: var(--scale-0);
+		line-height: 1;
+		user-select: none;
+		text-transform: capitalize;
+	}
+
+	.current-lang {
+		border: 1px solid var(--color-text-subdued);
+		color: var(--color-text-body);
+	}
+
+	.inactive-lang {
+		cursor: pointer;
+		color: var(--color-text-subdued);
+	}
+
+	.inactive-lang:hover,
+	.inactive-lang:focus {
+		box-shadow: var(--shadow-drop);
+		color: var(--color-text-body);
+	}
+
+	.snippet img {
+		margin-right: var(--size-1-5);
+		width: var(--size-3);
+	}
+
+	code pre {
+		display: flex;
+		flex-direction: column;
+		border: 1px solid var(--color-border-primary);
+		border-radius: var(--radius-md);
+		background-color: var(--color-background-tertiary);
+		padding: var(--size-4);
+		overflow-x: auto;
+		color: var(--color-text-body);
+		font-size: var(--scale-00);
+		tab-size: 2;
+	}
+
+	.client {
+		white-space: pre-wrap;
+		overflow-wrap: break-word;
+	}
+</style>

ui/packages/app/src/api_docs/EndpointDetail.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { Button } from "@gradio/button";
+	export let api_name: string;
+	export let root: string;
+	export let dependency_index: number;
+
+	let just_copied = -1;
+
+	function copy() {
+		navigator.clipboard.writeText(root + "run/" + api_name);
+		just_copied = dependency_index;
+		setTimeout(() => {
+			just_copied = -1;
+		}, 1500);
+	}
+</script>
+
+<h3>
+	<span class="post">POST</span>
+	/run/{api_name}
+</h3>
+<div class="endpoint prose">
+	Endpoint: <code>{root}run/{api_name}</code>
+	<Button size="sm" on:click={copy}>
+		{#if just_copied === dependency_index}
+			copied!
+		{:else}
+			copy
+		{/if}
+	</Button>
+</div>
+
+<style>
+	h3 {
+		margin-bottom: var(--size-2);
+		color: var(--color-text-body);
+		font-weight: var(--weight-bold);
+		font-size: var(--scale-1);
+	}
+
+	.post {
+		margin-right: var(--size-2);
+		border: 1px solid var(--api-pill-border);
+		border-radius: var(--radius-sm);
+		background: var(--api-pill-background);
+		padding-right: var(--size-1);
+		padding-left: var(--size-1);
+		color: var(--api-pill-text);
+		font-weight: var(--weight-semibold);
+		font-size: var(--scale-00);
+	}
+
+	.endpoint {
+		margin-bottom: var(--size-6);
+		color: var(--color-text-body);
+		font-size: var(--scale-00);
+	}
+
+	code {
+		border: none;
+		background: none;
+		font-size: 90%;
+	}
+
+	.endpoint > :global(button) {
+		margin-bottom: 0;
+		margin-left: var(--size-2);
+		padding: 0 var(--size-2);
+	}
+</style>

ui/packages/app/src/api_docs/InputPayload.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import type { ComponentMeta, Dependency } from "../components/types";
+	import { Button } from "@gradio/button";
+
+	export let dependency: Dependency;
+	export let dependency_failures: boolean[][];
+	export let dependency_index: number;
+	export let instance_map: {
+		[id: number]: ComponentMeta;
+	};
+	export let run: (id: number) => Promise<void>;
+	export let dependency_inputs: string[][];
+
+	function format_label(label: unknown) {
+		return label ? "'" + label + "'" : "the";
+	}
+</script>
+
+<h4>
+	<div class="toggle-icon">
+		<div class="toggle-dot" />
+	</div>
+	Input Payload
+</h4>
+<div class="payload-details">
+	&#123;
+	<br />
+	&nbsp;&nbsp;"data": [
+	<br />
+	{#each dependency.inputs as component_id, component_index}
+		&nbsp;&nbsp;&nbsp;&nbsp;
+		<input
+			class=""
+			type="text"
+			bind:value={dependency_inputs[dependency_index][component_index]}
+		/>
+		{#if dependency_failures[dependency_index][component_index]}
+			<span class="error">ERROR</span>
+		{/if}
+		<span class="type">
+			: {instance_map[component_id].documentation?.type},
+		</span>
+		<span class="desc">
+			// represents {instance_map[component_id].documentation?.description} of
+			{format_label(instance_map[component_id].props.label)}
+
+			<span class="name">
+				{instance_map[component_id].props.name}
+			</span>
+			component
+		</span>
+		<br />
+	{/each}
+	&nbsp;&nbsp;]
+	<br />
+	&#125;
+</div>
+
+<span class="space" />
+<Button
+	variant="primary"
+	on:click={run.bind(null, dependency_index)}
+	style={{ full_width: true }}
+>
+	Try It Out
+</Button>
+
+<style>
+	.space {
+		display: flex;
+		flex-basis: 1;
+		margin-top: var(--size-4);
+	}
+
+	h4 {
+		display: flex;
+		align-items: center;
+		margin-top: var(--size-6);
+		margin-bottom: var(--size-3);
+		color: var(--color-text-body);
+		font-weight: var(--weight-bold);
+	}
+
+	.toggle-icon {
+		display: flex;
+		align-items: center;
+		margin-right: var(--size-2);
+		border-radius: var(--radius-full);
+		background: var(--color-grey-300);
+		width: 12px;
+		height: 4px;
+	}
+
+	.toggle-dot {
+		border-radius: var(--radius-full);
+		background: var(--color-grey-700);
+		width: 6px;
+		height: 6px;
+	}
+
+	:global(.dark) .toggle-icon {
+		background: var(--color-grey-500);
+	}
+
+	:global(.dark) .toggle-dot {
+		background: var(--color-grey-400);
+	}
+
+	.payload-details {
+		display: block;
+		border: 1px solid var(--color-border-primary);
+		border-radius: var(--radius-lg);
+		background: var(--color-background-tertiary);
+		padding: var(--size-4);
+		color: var(--color-text-body);
+		font-size: var(--scale-00);
+		font-family: var(--font-mono);
+	}
+
+	input {
+		--ring-color: transparent;
+		margin-top: var(--size-0-5);
+		margin-bottom: var(--size-0-5);
+		box-shadow: 0 0 0 3px var(--ring-color);
+		border: 1px solid var(--input-border-color-base);
+		border-radius: var(--radius-sm);
+		background: var(--input-background-base);
+		padding: var(--size-0-5) var(--size-1);
+		width: var(--size-40);
+		font-size: var(--scale-000);
+	}
+
+	input:focus-visible {
+		--ring-color: var(--color-focus-primary);
+		outline: none;
+	}
+
+	input:focus {
+		--ring-color: var(--color-focus-primary);
+		border-color: var(--input-border-color-focus);
+	}
+
+	.error {
+		color: var(--color-functional-error-base);
+	}
+
+	.type {
+		color: var(--color-text-label);
+	}
+
+	.desc {
+		color: var(--color-text-subdued);
+	}
+
+	.name {
+		text-transform: capitalize;
+	}
+</style>

ui/packages/app/src/api_docs/NoApi.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import Clear from "./img/clear.svelte";
+
+	const dispatch = createEventDispatcher();
+
+	export let root: string;
+</script>
+
+<div class="wrap prose">
+	<h1>API Docs</h1>
+	<p class="attention">
+		No named API Routes found for
+		<code>
+			{root}
+		</code>
+	</p>
+	<p>
+		To expose an API endpoint of your app in this page, set the <code>
+			api_name
+		</code>
+		parameter of the event listener.
+		<br />
+		For more information, visit the
+		<a href="https://gradio.app/sharing_your_app/#api-page" target="_blank">
+			API Page guide
+		</a>
+		. To hide the API documentation button and this page, set
+		<code>show_api=False</code>
+		in the
+		<code>Blocks.launch()</code>
+		method.
+	</p>
+</div>
+
+<button on:click={() => dispatch("close")}>
+	<Clear />
+</button>
+
+<style>
+	.wrap {
+		padding: var(--size-6);
+	}
+
+	.attention {
+		font-weight: var(--weight-bold);
+		font-size: var(--scale-3);
+	}
+
+	.attention code {
+		border: none;
+		background: none;
+		color: var(--color-accent-base);
+		font-weight: var(--weight-bold);
+	}
+
+	button {
+		position: absolute;
+		top: var(--size-5);
+		right: var(--size-6);
+		width: var(--size-4);
+		color: var(--color-text-body);
+	}
+
+	button:hover {
+		color: var(--color-accent-base);
+	}
+
+	@media (--screen-md) {
+		button {
+			top: var(--size-6);
+		}
+	}
+</style>

ui/packages/app/src/api_docs/ResponseObject.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+	import type { ComponentMeta, Dependency } from "../components/types";
+	import Loader from "../components/StatusTracker/Loader.svelte";
+
+	export let dependency: Dependency;
+	export let dependency_index: number;
+	export let instance_map: {
+		[id: number]: ComponentMeta;
+	};
+
+	export let dependency_outputs: any[][];
+
+	export let is_running: boolean;
+</script>
+
+<h4>
+	<div class="toggle-icon">
+		<div class="toggle-dot" />
+	</div>
+	Response Object
+</h4>
+<div class="response-wrap">
+	<div class:hide={is_running}>
+		&#123;
+		<br />
+		&nbsp;&nbsp;"data": [
+		<br />
+		{#each dependency.outputs as component_id, component_index}
+			&nbsp;&nbsp;&nbsp;{#if dependency_outputs[dependency_index][component_index] !== undefined}
+				<input
+					disabled
+					type="text"
+					bind:value={dependency_outputs[dependency_index][component_index]}
+				/>
+				:
+			{/if}
+			<span class="type">
+				{instance_map[component_id].documentation?.type},
+			</span>
+			<span class="desc">
+				// represents {instance_map[component_id].documentation?.description} of
+				{((label) => {
+					return label ? "'" + label + "'" : "the";
+				})(instance_map[component_id].props.label)}
+
+				<span class="name capitalize">
+					{instance_map[component_id].props.name}
+				</span>
+				component
+			</span>
+			<br />
+		{/each}
+		&nbsp;&nbsp;],
+		<br />
+		&nbsp;&nbsp;"duration": (float)
+		<span class="desc">// number of seconds to run function call</span>
+		<br />
+		&#125;
+	</div>
+	{#if is_running}
+		<div class="load-wrap">
+			<Loader margin={false} />
+		</div>
+	{/if}
+</div>
+
+<style>
+	.load-wrap {
+		align-self: center;
+		justify-self: center;
+	}
+	h4 {
+		display: flex;
+		align-items: center;
+		margin-top: var(--size-6);
+		margin-bottom: var(--size-3);
+		color: var(--color-text-body);
+		font-weight: var(--weight-bold);
+	}
+
+	.toggle-icon {
+		display: flex;
+		align-items: center;
+		margin-right: var(--size-2);
+		border-radius: var(--radius-full);
+		background: var(--color-grey-300);
+		width: 12px;
+		height: 4px;
+	}
+
+	.toggle-dot {
+		margin-left: auto;
+		border-radius: var(--radius-full);
+		background: var(--color-grey-700);
+		width: 6px;
+		height: 6px;
+	}
+
+	.response-wrap {
+		display: flex;
+		flex-direction: column;
+		border: 1px solid var(--color-border-primary);
+		border-radius: var(--radius-lg);
+		background: var(--color-background-tertiary);
+		padding: var(--size-4);
+		color: var(--color-text-body);
+		font-size: var(--scale-00);
+		font-family: var(--font-mono);
+	}
+
+	input {
+		--ring-color: transparent;
+		margin-top: var(--size-0-5);
+		margin-bottom: var(--size-0-5);
+		box-shadow: 0 0 0 3px var(--ring-color);
+		border: 1px solid var(--input-border-color-base);
+		border-radius: var(--radius-sm);
+		background: var(--input-background-base);
+		padding: var(--size-0-5) var(--size-1);
+		width: var(--size-40);
+		font-size: var(--scale-000);
+	}
+
+	input:focus-visible {
+		--ring-color: var(--color-focus-primary);
+		outline: none;
+	}
+
+	input:focus {
+		--ring-color: var(--color-focus-primary);
+		border-color: var(--input-border-color-focus);
+	}
+
+	.type {
+		color: var(--color-text-label);
+	}
+
+	.desc {
+		color: var(--color-text-subdued);
+	}
+
+	.name {
+		text-transform: capitalize;
+	}
+
+	.hide {
+		display: none;
+	}
+</style>

ui/packages/app/src/api_docs/img/api-logo.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.9425 2.94265C27.4632 2.42195 27.4632 1.57773 26.9425 1.05703C26.4218 0.536329 25.5776 0.536329 25.0569 1.05703L22.5713 3.54256C21.1213 2.59333 19.5367 2.43378 18.1753 2.64006C16.5495 2.88638 15.1127 3.66838 14.3905 4.39053L12.3905 6.39053C12.1405 6.64058 12 6.97972 12 7.33334C12 7.68697 12.1405 8.0261 12.3905 8.27615L19.7239 15.6095C20.2446 16.1302 21.0888 16.1302 21.6095 15.6095L23.6095 13.6095C24.3316 12.8873 25.1136 11.4505 25.36 9.82475C25.5663 8.46312 25.4066 6.87827 24.4571 5.42807L26.9425 2.94265Z" fill="#3c4555"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.276 12.9426C12.7967 12.4219 12.7967 11.5777 12.276 11.057C11.7553 10.5363 10.9111 10.5363 10.3904 11.057L8.66651 12.7809L8.27615 12.3905C8.0261 12.1405 7.68697 12 7.33334 12C6.97972 12 6.64058 12.1405 6.39053 12.3905L4.39053 14.3905C3.66838 15.1127 2.88638 16.5495 2.64006 18.1753C2.43377 19.5367 2.59333 21.1214 3.54262 22.5714L1.05703 25.057C0.536329 25.5777 0.536329 26.4219 1.05703 26.9426C1.57773 27.4633 2.42195 27.4633 2.94265 26.9426L5.42817 24.4571C6.87835 25.4066 8.46315 25.5663 9.82475 25.36C11.4505 25.1136 12.8873 24.3316 13.6095 23.6095L15.6095 21.6095C16.1302 21.0888 16.1302 20.2446 15.6095 19.7239L15.2188 19.3332L16.9426 17.6093C17.4633 17.0886 17.4633 16.2444 16.9426 15.7237C16.4219 15.203 15.5777 15.203 15.057 15.7237L13.3332 17.4475L10.5521 14.6665L12.276 12.9426Z" fill="#FF7C00"/>
+</svg>

ui/packages/app/src/api_docs/img/clear.svelte

@@ -0,0 +1,19 @@
+<svg
+	width="100%"
+	height="100%"
+	viewBox="0 0 5 5"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	xml:space="preserve"
+	style="fill:currentColor;fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+>
+	<g>
+		<path
+			d="M3.789,0.09C3.903,-0.024 4.088,-0.024 4.202,0.09L4.817,0.705C4.931,0.819 4.931,1.004 4.817,1.118L1.118,4.817C1.004,4.931 0.819,4.931 0.705,4.817L0.09,4.202C-0.024,4.088 -0.024,3.903 0.09,3.789L3.789,0.09Z"
+		/>
+		<path
+			d="M4.825,3.797C4.934,3.907 4.934,4.084 4.825,4.193L4.193,4.825C4.084,4.934 3.907,4.934 3.797,4.825L0.082,1.11C-0.027,1.001 -0.027,0.823 0.082,0.714L0.714,0.082C0.823,-0.027 1.001,-0.027 1.11,0.082L4.825,3.797Z"
+		/>
+	</g>
+</svg>

ui/packages/app/src/api_docs/img/javascript.svg

@@ -0,0 +1,16 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+>
+	<rect width="32" height="32" fill="#f7df1e"></rect>
+	<path
+		d="M21.5,25a3.27,3.27,0,0,0,3,1.83c1.25,0,2-.63,2-1.49,0-1-.81-1.39-2.19-2L23.56,23C21.39,22.1,20,20.94,20,18.49c0-2.25,1.72-4,4.41-4a4.44,4.44,0,0,1,4.27,2.41l-2.34,1.5a2,2,0,0,0-1.93-1.29,1.31,1.31,0,0,0-1.44,1.29c0,.9.56,1.27,1.85,1.83l.75.32c2.55,1.1,4,2.21,4,4.72,0,2.71-2.12,4.19-5,4.19a5.78,5.78,0,0,1-5.48-3.07Zm-10.63.26c.48.84.91,1.55,1.94,1.55s1.61-.39,1.61-1.89V14.69h3V25c0,3.11-1.83,4.53-4.49,4.53a4.66,4.66,0,0,1-4.51-2.75Z"
+	></path>
+</svg>

ui/packages/app/src/api_docs/img/python.svg

@@ -0,0 +1,20 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+>
+	<path
+		d="M15.84.5a16.4,16.4,0,0,0-3.57.32C9.1,1.39,8.53,2.53,8.53,4.64V7.48H16v1H5.77a4.73,4.73,0,0,0-4.7,3.74,14.82,14.82,0,0,0,0,7.54c.57,2.28,1.86,3.82,4,3.82h2.6V20.14a4.73,4.73,0,0,1,4.63-4.63h7.38a3.72,3.72,0,0,0,3.73-3.73V4.64A4.16,4.16,0,0,0,19.65.82,20.49,20.49,0,0,0,15.84.5ZM11.78,2.77a1.39,1.39,0,0,1,1.38,1.46,1.37,1.37,0,0,1-1.38,1.38A1.42,1.42,0,0,1,10.4,4.23,1.44,1.44,0,0,1,11.78,2.77Z"
+		fill="#5a9fd4"
+	></path>
+	<path
+		d="M16.16,31.5a16.4,16.4,0,0,0,3.57-.32c3.17-.57,3.74-1.71,3.74-3.82V24.52H16v-1H26.23a4.73,4.73,0,0,0,4.7-3.74,14.82,14.82,0,0,0,0-7.54c-.57-2.28-1.86-3.82-4-3.82h-2.6v3.41a4.73,4.73,0,0,1-4.63,4.63H12.35a3.72,3.72,0,0,0-3.73,3.73v7.14a4.16,4.16,0,0,0,3.73,3.82A20.49,20.49,0,0,0,16.16,31.5Zm4.06-2.27a1.39,1.39,0,0,1-1.38-1.46,1.37,1.37,0,0,1,1.38-1.38,1.42,1.42,0,0,1,1.38,1.38A1.44,1.44,0,0,1,20.22,29.23Z"
+		fill="#ffd43b"
+	></path>
+</svg>

ui/packages/app/src/api_docs/index.ts

@@ -0,0 +1 @@
+export { default as ApiDocs } from "./ApiDocs.svelte";

ui/packages/app/src/api_docs/utils.ts

@@ -0,0 +1,34 @@
+export function represent_value(
+	value: string,
+	type: string | undefined,
+	lang: "js" | "py" | null = null
+) {
+	if (type === undefined) {
+		return lang === "py" ? "None" : null;
+	}
+	if (type === "string") {
+		return lang === null ? value : '"' + value + '"';
+	} else if (type === "number") {
+		return lang === null ? parseFloat(value) : value;
+	} else if (type === "boolean") {
+		if (lang === "py") {
+			return value === "true" ? "True" : "False";
+		} else if (lang === "js") {
+			return value;
+		} else {
+			return value === "true";
+		}
+	} else {
+		// assume object type
+		if (lang === null) {
+			return value === "" ? null : JSON.parse(value);
+		} else if (typeof value === "string") {
+			if (value === "") {
+				return lang === "py" ? "None" : "null";
+			}
+			return value;
+		} else {
+			return JSON.stringify(value);
+		}
+	}
+}

ui/packages/app/src/components/Accordion/Accordion.svelte

@@ -1,27 +1,24 @@
 <script lang="ts">
+	import { Accordion } from "@gradio/accordion";
+	import { Block } from "@gradio/atoms";
+	import StatusTracker from "../StatusTracker/StatusTracker.svelte";
+	import type { LoadingStatus } from "../StatusTracker/types";
+
 	import { Component as Column } from "../Column";
+
 	export let label: string;
 	export let elem_id: string;
 	export let visible: boolean = true;
 	export let open: boolean = true;
-
-	$: _open = open;
-
-	const toggle = () => {
-		_open = !_open;
-	};
+	export let loading_status: LoadingStatus;
 </script>
 
-<div
-	id={elem_id}
-	class="p-3 border border-gray-200 dark:border-gray-700 rounded-lg flex flex-col gap-3 hover:border-gray-300 dark:hover:border-gray-600 transition"
-	class:hidden={!visible}
->
-	<div on:click={toggle} class="w-full flex justify-between cursor-pointer">
-		<span>{label}</span>
-		<span class:rotate-90={!_open} class="transition">▼</span>
-	</div>
-	<Column visible={_open}>
-		<slot />
-	</Column>
-</div>
+<Block {elem_id} {visible}>
+	<StatusTracker {...loading_status} />
+
+	<Accordion {label} {open}>
+		<Column>
+			<slot />
+		</Column>
+	</Accordion>
+</Block>

ui/packages/app/src/components/Audio/Audio.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import { _ } from "svelte-i18n";
+	import UploadText from "../UploadText.svelte";
 
 	import type { FileData } from "@gradio/upload";
 	import type { LoadingStatus } from "../StatusTracker/types";
@@ -8,8 +9,6 @@
 	import { Audio, StaticAudio } from "@gradio/audio";
 	import StatusTracker from "../StatusTracker/StatusTracker.svelte";
 	import { Block } from "@gradio/atoms";
-	import type { Styles } from "@gradio/utils";
-	export let style: Styles = {};
 
 	import { normalise_file } from "@gradio/upload";
 
@@ -79,10 +78,9 @@
 				loading_status.status = "error";
 				loading_status.message = detail;
 			}}
-			drop_text={$_("interface.drop_audio")}
-			or_text={$_("or")}
-			upload_text={$_("interface.click_to_upload")}
-		/>
+		>
+			<UploadText type="audio" />
+		</Audio>
 	{:else}
 		<StaticAudio
 			{show_label}

ui/packages/app/src/components/Carousel/Carousel.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-	import { Carousel } from "@gradio/carousel";
-	import StatusTracker from "../StatusTracker/StatusTracker.svelte";
-	import type { LoadingStatus } from "../StatusTracker/types";
-
-	export let elem_id: string = "";
-	export let visible: boolean = true;
-	export let loading_status: LoadingStatus;
-</script>
-
-<Carousel {elem_id} {visible} on:change>
-	<StatusTracker {...loading_status} />
-
-	<slot />
-</Carousel>

ui/packages/app/src/components/Carousel/Carousel.test.svelte

@@ -1,16 +0,0 @@
-<script>
-	// @ts-nocheck
-	import Carousel from "./Carousel.svelte";
-	import CarouselItem from "../CarouselItem/CarouselItem.svelte";
-	import api_logo from "../../../public/static/img/api-logo.svg";
-</script>
-
-<Carousel on:change loading_status="complete">
-	<CarouselItem>
-		<h1>Item 1</h1>
-	</CarouselItem>
-
-	<CarouselItem>
-		<img src={api_logo} alt="" />
-	</CarouselItem>
-</Carousel>

ui/packages/app/src/components/Carousel/Carousel.test.ts

@@ -1,52 +0,0 @@
-import { test, describe, assert, afterEach } from "vitest";
-import { spy } from "tinyspy";
-import { cleanup, fireEvent, render } from "@gradio/tootils";
-
-import Carousel from "./Carousel.test.svelte";
-
-describe("Carousel + CarouselItem", () => {
-	afterEach(() => cleanup());
-
-	test("renders first carousel item is rendered by default", () => {
-		const { container } = render(Carousel);
-		const item = container.querySelector(".component")!;
-
-		assert.equal(item.children[0].tagName, "H1");
-		assert.equal(item.children[0].innerHTML, "Item 1");
-	});
-
-	test.skip("clicking next shows the second component", async () => {
-		const { container } = render(Carousel);
-		const [, next] = Array.from(container.querySelectorAll("button"));
-
-		await fireEvent.click(next);
-		const item = container.querySelector(".component")!;
-
-		assert.equal(item.children[0].tagName, "IMG");
-	});
-
-	test.skip("clicking previous from index 0 shows the last component", async () => {
-		const { container } = render(Carousel);
-		const [previous] = Array.from(container.querySelectorAll("button"));
-
-		await fireEvent.click(previous);
-		const item = container.querySelector(".component")!;
-
-		assert.equal(item.children[0].tagName, "IMG");
-	});
-
-	test("change callback is triggered when", async () => {
-		const { container, component } = render(Carousel);
-		const [previous, next] = Array.from(container.querySelectorAll("button"));
-
-		const mock = spy();
-
-		component.$on("change", mock);
-
-		fireEvent.click(next);
-		fireEvent.click(previous);
-
-		assert.isTrue(mock.called);
-		assert.equal(mock.callCount, 2);
-	});
-});

ui/packages/app/src/components/Carousel/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "./Carousel.svelte";
-export const modes = ["static"];

ui/packages/app/src/components/CarouselItem/CarouselItem.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { CarouselItem } from "@gradio/carousel";
-</script>
-
-<CarouselItem>
-	<slot />
-</CarouselItem>

ui/packages/app/src/components/CarouselItem/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "./CarouselItem.svelte";
-export const modes = ["static"];

ui/packages/app/src/components/ColorPicker/ColorPicker.svelte

@@ -28,7 +28,6 @@
 	<StatusTracker {...loading_status} />
 
 	<ColorPicker
-		{style}
 		bind:value
 		{label}
 		{show_label}

ui/packages/app/src/components/Column/Column.svelte

@@ -12,12 +12,44 @@
 
 <div
 	id={elem_id}
-	class="flex flex-col relative col {create_classes(style)}"
-	class:gap-4={style.gap !== false}
-	class:gr-compact={variant === "compact"}
-	class:gr-panel={variant === "panel"}
-	class:!hidden={!visible}
+	class:gap={style.gap !== false}
+	class:compact={variant === "compact"}
+	class:panel={variant === "panel"}
+	class:hide={!visible}
 	style={`min-width: min(${min_width}px, 100%); flex-grow: ${scale}`}
 >
 	<slot />
 </div>
+
+<style>
+	div {
+		display: flex;
+		position: relative;
+		flex-direction: column;
+	}
+
+	div > :global(*),
+	div > :global(.form > *) {
+		width: var(--size-full);
+	}
+
+	.gap {
+		gap: var(--size-4);
+	}
+
+	.hide {
+		display: none;
+	}
+
+	.compact > :global(*),
+	.compact :global(.box) {
+		border-radius: 0;
+	}
+
+	.compact,
+	.panel {
+		border-radius: var(--radius-lg);
+		background: var(--color-background-secondary);
+		padding: var(--size-2);
+	}
+</style>

ui/packages/app/src/components/DataFrame/DataFrame.svelte

@@ -36,7 +36,7 @@
 	}
 </script>
 
-<div id={elem_id} class="relative overflow-hidden" class:!hidden={!visible}>
+<div id={elem_id} class="relative overflow-hidden" class:hide={!visible}>
 	<StatusTracker {...loading_status} />
 	<Table
 		{label}
@@ -50,3 +50,14 @@
 		{datatype}
 	/>
 </div>
+
+<style>
+	div {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.hide {
+		display: none;
+	}
+</style>

ui/packages/app/src/components/Dataset/Dataset.svelte

@@ -18,13 +18,22 @@
 
 	let samples_dir: string = (root_url ?? root) + "file=";
 	let page = 0;
-	let gallery = headers.length === 1;
+	$: gallery = headers.length < 1;
 	let paginate = samples.length > samples_per_page;
 
 	let selected_samples: Array<Array<any>>;
 	let page_count: number;
 	let visible_pages: Array<number> = [];
 
+	let current_hover = -1;
+
+	function handle_mouseenter(i: number) {
+		current_hover = i;
+	}
+	function handle_mouseleave() {
+		current_hover = -1;
+	}
+
 	$: {
 		if (paginate) {
 			visible_pages = [];
@@ -61,60 +70,57 @@
 	);
 </script>
 
-<div
-	id={elem_id}
-	class="mt-4 inline-block max-w-full text-gray-700 w-full"
-	class:!hidden={!visible}
->
-	<div class="text-xs mb-2 flex items-center text-gray-500">
+<div id={elem_id} class="wrap" class:hide={!visible}>
+	<div class="label">
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
 			xmlns:xlink="http://www.w3.org/1999/xlink"
 			aria-hidden="true"
 			role="img"
-			class="mr-1"
 			width="1em"
 			height="1em"
 			preserveAspectRatio="xMidYMid meet"
 			viewBox="0 0 32 32"
-			><path
+		>
+			<path
 				fill="currentColor"
 				d="M10 6h18v2H10zm0 18h18v2H10zm0-9h18v2H10zm-6 0h2v2H4zm0-9h2v2H4zm0 18h2v2H4z"
-			/></svg
-		>
+			/>
+		</svg>
 		{label}
 	</div>
 	{#if gallery}
-		<div class="gr-samples-gallery">
+		<div class="gallery">
 			{#each selected_samples as sample_row, i}
-				<!-- {@const x = component_map[]} -->
-
 				<button
-					class="group rounded-lg"
+					class="button"
 					on:click={() => {
 						value = i + page * samples_per_page;
 						dispatch("click", value);
 					}}
+					on:mouseenter={() => handle_mouseenter(i)}
+					on:mouseleave={() => handle_mouseleave()}
 				>
 					{#if Object.keys(component_map).includes(components[0]) && component_map[components[0]]}
 						<svelte:component
 							this={component_meta[0][0].component}
 							value={sample_row[0]}
 							{samples_dir}
+							type="gallery"
+							selected={current_hover === i}
+							index={i}
 						/>
 					{/if}
 				</button>
 			{/each}
 		</div>
 	{:else}
-		<div class="overflow-x-auto border table-auto rounded-lg w-full text-sm">
-			<table class="gr-samples-table">
+		<div class="table-wrap">
+			<table>
 				<thead>
-					<tr
-						class="border-b dark:border-gray-800 divide-x dark:divide-gray-800 shadow-sm"
-					>
+					<tr class="tr-head">
 						{#each headers as header}
-							<th class="p-2 whitespace-nowrap min-w-lg text-left">
+							<th>
 								{header}
 							</th>
 						{/each}
@@ -123,16 +129,25 @@
 				<tbody>
 					{#each component_meta as sample_row, i}
 						<tr
-							class="group cursor-pointer odd:bg-gray-50 border-b dark:border-gray-800 divide-x dark:divide-gray-800 last:border-none hover:bg-orange-50 hover:divide-orange-100 dark:hover:bg-gray-700"
+							class="tr-body"
 							on:click={() => {
 								value = i + page * samples_per_page;
 								dispatch("click", value);
 							}}
+							on:mouseenter={() => handle_mouseenter(i)}
+							on:mouseleave={() => handle_mouseleave()}
 						>
 							{#each sample_row as { value, component }, j}
 								{#if components[j] !== undefined && component_map[components[j]] !== undefined}
-									<td class="p-2">
-										<svelte:component this={component} {value} {samples_dir} />
+									<td>
+										<svelte:component
+											this={component}
+											{value}
+											{samples_dir}
+											type="table"
+											selected={current_hover === i}
+											index={i}
+										/>
 									</td>
 								{/if}
 							{/each}
@@ -144,14 +159,14 @@
 	{/if}
 </div>
 {#if paginate}
-	<div class="flex gap-2 items-center justify-center text-sm">
+	<div class="paginate">
 		Pages:
 		{#each visible_pages as visible_page}
 			{#if visible_page === -1}
 				<div>...</div>
 			{:else}
 				<button
-					class:font-bold={page === visible_page}
+					class:current-page={page === visible_page}
 					on:click={() => (page = visible_page)}
 				>
 					{visible_page + 1}
@@ -160,3 +175,120 @@
 		{/each}
 	</div>
 {/if}
+
+<style>
+	.wrap {
+		display: inline-block;
+		margin-top: var(--size-4);
+		width: var(--size-full);
+		max-width: var(--size-full);
+		color: var(--color-text-body);
+	}
+
+	.hide {
+		display: none;
+	}
+
+	.label {
+		display: flex;
+		align-items: center;
+		margin-bottom: var(--size-2);
+		color: var(--color-text-label);
+		font-size: var(--scale-000);
+		line-height: var(--line-sm);
+	}
+
+	svg {
+		margin-right: var(--size-1);
+	}
+
+	.gallery {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--size-2);
+	}
+
+	.button {
+		border: 1px solid var(--color-border-primary);
+		border-radius: var(--radius-lg);
+		overflow: hidden;
+		overflow: hidden;
+	}
+
+	.button:hover {
+		background: var(--dataset-gallery-background-hover);
+	}
+
+	.table-wrap {
+		border: 1px solid var(--color-border-primary);
+		border-radius: var(--radius-lg);
+		width: var(--size-full);
+		table-layout: auto;
+		overflow-x: auto;
+		font-size: var(--scale-00);
+		line-height: var(--line-sm);
+	}
+	table {
+		width: var(--size-full);
+	}
+
+	.tr-head {
+		box-shadow: var(--shadow-drop-lg);
+		border-bottom: 1px solid var(--color-border-primary);
+	}
+
+	.tr-head > * + * {
+		border-right-width: 0px;
+		border-left-width: 1px;
+		border-color: var(--dataset-table-border-base);
+	}
+
+	th {
+		padding: var(--size-2);
+		white-space: nowrap;
+	}
+
+	.tr-body {
+		cursor: pointer;
+		border-bottom: 1px solid var(--dataset-table-border-base);
+		background: var(--table-even-background);
+	}
+
+	.tr-body:last-child {
+		border: none;
+	}
+
+	.tr-body:nth-child(odd) {
+		background: var(--table-odd-background);
+	}
+
+	.tr-body:hover {
+		background: var(--dataset-table-background-hover);
+	}
+
+	.tr-body > * + * {
+		border-right-width: 0px;
+		border-left-width: 1px;
+		border-color: var(--dataset-table-border-base);
+	}
+
+	.tr-body:hover > * + * {
+		border-color: var(--dataset-table-border-hover);
+	}
+
+	td {
+		padding: var(--size-2);
+	}
+
+	.paginate {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: var(--size-2);
+		font-size: var(--scale-000);
+	}
+
+	button.current-page {
+		font-weight: var(--weight-bold);
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/Audio.svelte

@@ -2,6 +2,32 @@
 	import type { Value } from "../../Audio/types";
 
 	export let value: Value;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
 </script>
 
-<div class="gr-sample-audio">{value}</div>
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value}
+</div>
+
+<style>
+	.gallery {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		border-radius: var(--radius-lg);
+		background: var(--dataset-gallery-background-base);
+		padding: var(--size-1) var(--size-2);
+		font-size: var(--scale-00);
+		text-align: left;
+	}
+
+	.gallery:hover,
+	.selected.gallery {
+		background: var(--dataset-gallery-background-hover);
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/Checkbox.svelte

@@ -1,5 +1,33 @@
 <script lang="ts">
 	export let value: boolean;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
 </script>
 
-<div class="gr-sample-checkbox">{value.toLocaleString()}</div>
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value.toLocaleString()}
+</div>
+
+<style>
+	div {
+		font-size: var(--scale-000);
+		font-family: var(--font-mono);
+	}
+	.gallery {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		border-radius: var(--radius-lg);
+		padding: var(--size-1) var(--size-2);
+		text-align: left;
+	}
+
+	.gallery:hover,
+	.selected.gallery {
+		background: var(--dataset-gallery-background-hover);
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/CheckboxGroup.svelte

@@ -1,5 +1,30 @@
 <script lang="ts">
 	export let value: Array<string>;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
 </script>
 
-<div class="gr-sample-checkboxgroup">{value.join(", ")}</div>
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{#each value as check, i}{check.toLocaleString()}{#if i !== value.length - 1},&nbsp;{/if}{/each}
+</div>
+
+<style>
+	.gallery {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		border-radius: var(--radius-lg);
+		background: var(--dataset-gallery-background-base);
+		padding: var(--size-1) var(--size-2);
+		text-align: left;
+	}
+
+	.gallery:hover,
+	.selected.gallery {
+		background: var(--dataset-gallery-background-hover);
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/ColorPicker.svelte

@@ -1,8 +1,19 @@
 <script lang="ts">
 	export let value: string;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
 </script>
 
 <div
-	class="w-10 h-10 border dark:border-slate-300"
 	style="background-color: {value}"
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
 />
+
+<style>
+	div {
+		width: var(--size-10);
+		height: var(--size-10);
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/Dataframe.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
 	//@ts-ignore
 	import { csvParseRows, tsvParseRows } from "d3-dsv";
+
 	export let value: Array<Array<string | number>> | string;
 	export let samples_dir: string;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
+	export let index: number;
+
 	let hovered = false;
 	let loaded_value: Array<Array<string | number>> | string = value;
 	let loaded = Array.isArray(loaded_value);
@@ -44,38 +49,110 @@
 
 {#if loaded}
 	<div
-		class="gr-sample-dataframe"
+		class:table={type === "table"}
+		class:gallery={type === "gallery"}
+		class:selected
 		on:mouseenter={() => (hovered = true)}
 		on:mouseleave={() => (hovered = false)}
 	>
-		<table class="gr-sample-dataframe relative">
+		<table class="">
 			{#each loaded_value.slice(0, 3) as row, i}
 				<tr>
 					{#each row.slice(0, 3) as cell, j}
-						<td
-							class="p-2 {i < 3
-								? 'border-b border-b-slate-300 dark:border-b-slate-700'
-								: ''} 
-							{j < 3 ? 'border-r border-r-slate-300 dark:border-r-slate-700 ' : ''}"
-							>{cell}</td
-						>
+						<td>{cell}</td>
 					{/each}
 					{#if row.length > 3}
-						<td
-							class="p-2  border-r border-b  border-r-slate-300 dark:border-r-slate-700 border-b-slate-300 dark:border-b-slate-700"
-							>…</td
-						>
+						<td>…</td>
 					{/if}
 				</tr>
 			{/each}
 			{#if value.length > 3}
 				<div
-					class="absolute w-full h-[50%] bottom-0 bg-gradient-to-b from-[rgba(255,255,255,0)] dark:from-[rgba(0,0,0,0)] to-white"
-					class:dark:to-gray-950={!hovered}
-					class:dark:to-gray-800={hovered}
-					class:to-gray-50={hovered}
+					class="overlay"
+					class:odd={index % 2 != 0}
+					class:even={index % 2 == 0}
+					class:button={type === "gallery"}
 				/>
 			{/if}
 		</table>
 	</div>
 {/if}
+
+<style>
+	.gallery {
+		align-items: center;
+		cursor: pointer;
+		border-collapse: collapse;
+		padding: var(--size-2);
+		overflow: hidden;
+		font-size: var(--scale-000);
+		line-height: var(--line-sm);
+		text-align: left;
+	}
+
+	table {
+		position: relative;
+	}
+
+	td {
+		border: 1px solid var(--dataset-dataframe-border-base);
+		padding: var(--size-2);
+		font-size: var(--scale-000);
+		font-family: var(--font-mono);
+	}
+
+	.table.selected td {
+		border-color: var(--dataset-dataframe-border-hover);
+	}
+
+	.gallery.selected td {
+		border-color: var(--dataset-dataframe-border-hover);
+	}
+
+	td:first-child {
+		border-left: none;
+	}
+
+	tr:first-child td {
+		border-top: none;
+	}
+
+	td:last-child {
+		border-right: none;
+	}
+
+	tr:last-child td {
+		border-bottom: none;
+	}
+
+	.overlay {
+		--gradient-to: transparent;
+		position: absolute;
+		bottom: 0;
+		background: linear-gradient(to bottom, transparent, var(--gradient-to));
+		width: var(--size-full);
+		height: 50%;
+	}
+
+	/* i dont know what i've done here but it is what it is */
+	.odd {
+		--gradient-to: var(--table-even-background);
+	}
+
+	.even {
+		--gradient-to: var(--table-odd-background);
+	}
+
+	.button {
+		--gradient-to: var(--dataset-gallery-background-base);
+	}
+
+	.selected .even,
+	.selected .odd {
+		--gradient-to: var(--dataset-table-background-hover);
+	}
+
+	.selected .button {
+		--gradient-to: var(--dataset-gallery-background-hover);
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/Dropdown.svelte

@@ -1,5 +1,20 @@
 <script lang="ts">
 	export let value: string;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
 </script>
 
-<div class="gr-sample-dropdown">{value}</div>
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value}
+</div>
+
+<style>
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+		font-size: var(--scale-00);
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/File.svelte

@@ -1,10 +1,37 @@
 <script lang="ts">
 	import type { FileData } from "../../File/types";
+
 	export let value: FileData;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
 </script>
 
-{#if Array.isArray(value)}
-	<div class="truncate">{value.join(", ")}</div>
-{:else}
-	<div class="truncate">{value}</div>
-{/if}
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{Array.isArray(value) ? value.join(", ") : value}
+</div>
+
+<style>
+	div {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.gallery {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		background: var(--dataset-gallery-background-base);
+		padding: var(--size-1) var(--size-2);
+		font-size: var(--scale-00);
+		text-align: left;
+	}
+
+	.gallery:hover,
+	.selected.gallery {
+		background: var(--dataset-gallery-background-hover);
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/HTML.svelte

@@ -1,5 +1,32 @@
 <script lang="ts">
 	export let value: string;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
 </script>
 
-<div class="gr-sample-html">{@html value}</div>
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+	class="prose"
+>
+	{@html value}
+</div>
+
+<style>
+	.gallery {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		border-radius: var(--radius-lg);
+		background: var(--dataset-gallery-background-base);
+		padding: var(--size-2);
+		font-size: var(--scale-000);
+		text-align: left;
+	}
+
+	.gallery:hover,
+	.selected.gallery {
+		background: var(--dataset-gallery-background-hover);
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/Image.svelte

@@ -1,10 +1,39 @@
 <script lang="ts">
 	export let value: string;
 	export let samples_dir: string;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->
 <img
-	class="gr-sample-image object-contain h-20 w-20"
 	src={samples_dir + value}
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
 />
+
+<style>
+	img {
+		flex: none;
+		border: 2px solid var(--color-border-primary);
+		border-radius: var(--radius-lg);
+		max-width: none;
+	}
+
+	img:hover,
+	img.selected {
+		border-color: var(--color-accent-light);
+	}
+
+	.table {
+		width: var(--size-20);
+		height: var(--size-20);
+		object-fit: cover;
+	}
+
+	.gallery {
+		max-height: var(--size-20);
+		object-fit: cover;
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/Markdown.svelte

@@ -1,5 +1,32 @@
 <script lang="ts">
 	export let value: string;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
 </script>
 
-<div class="gr-sample-markdown">{@html value}</div>
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+	class="prose"
+>
+	{@html value}
+</div>
+
+<style>
+	.gallery {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		border-radius: var(--radius-lg);
+		background: var(--dataset-gallery-background-base);
+		padding: var(--size-2);
+		font-size: var(--scale-000);
+		text-align: left;
+	}
+
+	.gallery:hover,
+	.selected.gallery {
+		background: var(--dataset-gallery-background-hover);
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/Model3D.svelte

@@ -1,6 +1,33 @@
 <script lang="ts">
-	import type { Value } from "../../Model3D/types";
+	import type { Value } from "../../Audio/types";
+
 	export let value: Value;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
 </script>
 
-<div class="gr-sample-3d">{value}</div>
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value}
+</div>
+
+<style>
+	.gallery {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		border-radius: var(--radius-lg);
+		background: var(--dataset-gallery-background-base);
+		padding: var(--size-1) var(--size-2);
+		font-size: var(--scale-00);
+		text-align: left;
+	}
+
+	.gallery:hover,
+	.selected.gallery {
+		background: var(--dataset-gallery-background-hover);
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/Number.svelte

@@ -1,5 +1,33 @@
 <script lang="ts">
-	export let value: string;
+	import type { Value } from "../../Audio/types";
+
+	export let value: Value;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
 </script>
 
-<div class="gr-sample-number">{value}</div>
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value}
+</div>
+
+<style>
+	.gallery {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		border-radius: var(--radius-lg);
+		background: var(--dataset-gallery-background-base);
+		padding: var(--size-1) var(--size-2);
+		font-size: var(--scale-00);
+		text-align: left;
+	}
+
+	.gallery:hover,
+	.selected.gallery {
+		background: var(--dataset-gallery-background-hover);
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/Radio.svelte

@@ -1,5 +1,33 @@
 <script lang="ts">
-	export let value: string;
+	import type { Value } from "../../Audio/types";
+
+	export let value: Value;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
 </script>
 
-<div class="gr-sample-radio">{value}</div>
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value}
+</div>
+
+<style>
+	.gallery {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		border-radius: var(--radius-lg);
+		background: var(--dataset-gallery-background-base);
+		padding: var(--size-1) var(--size-2);
+		font-size: var(--scale-00);
+		text-align: left;
+	}
+
+	.gallery:hover,
+	.selected.gallery {
+		background: var(--dataset-gallery-background-hover);
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/Slider.svelte

@@ -1,5 +1,33 @@
 <script lang="ts">
-	export let value: number;
+	import type { Value } from "../../Audio/types";
+
+	export let value: Value;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
 </script>
 
-<div class="gr-sample-slider">{value}</div>
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value}
+</div>
+
+<style>
+	.gallery {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		border-radius: var(--radius-lg);
+		background: var(--dataset-gallery-background-base);
+		padding: var(--size-1) var(--size-2);
+		font-size: var(--scale-00);
+		text-align: left;
+	}
+
+	.gallery:hover,
+	.selected.gallery {
+		background: var(--dataset-gallery-background-hover);
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/Textbox.svelte

@@ -1,5 +1,33 @@
 <script lang="ts">
-	export let value: string;
+	import type { Value } from "../../Audio/types";
+
+	export let value: Value;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
 </script>
 
-<div class="gr-sample-textbox">{value}</div>
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value}
+</div>
+
+<style>
+	.gallery {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		border-radius: var(--radius-lg);
+		background: var(--dataset-gallery-background-base);
+		padding: var(--size-1) var(--size-2);
+		font-size: var(--scale-00);
+		text-align: left;
+	}
+
+	.gallery:hover,
+	.selected.gallery {
+		background: var(--dataset-gallery-background-hover);
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/TimeSeries.svelte

@@ -1,6 +1,33 @@
 <script lang="ts">
-	import type { FileData } from "../../File/types";
-	export let value: FileData;
+	import type { Value } from "../../Audio/types";
+
+	export let value: Value;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
 </script>
 
-<div class="truncate">{value}</div>
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value}
+</div>
+
+<style>
+	.gallery {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		border-radius: var(--radius-lg);
+		background: var(--dataset-gallery-background-base);
+		padding: var(--size-1) var(--size-2);
+		font-size: var(--scale-00);
+		text-align: left;
+	}
+
+	.gallery:hover,
+	.selected.gallery {
+		background: var(--dataset-gallery-background-hover);
+	}
+</style>

ui/packages/app/src/components/Dataset/ExampleComponents/Video.svelte

@@ -2,6 +2,8 @@
 	import { playable } from "../../utils/helpers";
 	import { onMount } from "svelte";
 
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
 	export let value: string;
 	export let samples_dir: string;
 	let video: HTMLVideoElement;
@@ -23,11 +25,37 @@
 		muted
 		playsinline
 		bind:this={video}
+		class:table={type === "table"}
+		class:gallery={type === "gallery"}
+		class:selected
 		on:mouseover={video.play}
 		on:mouseout={video.pause}
-		class="gr-sample-video"
 		src={samples_dir + value}
 	/>
 {:else}
-	<div class="gr-sample-video">{value}</div>
+	<div>{value}</div>
 {/if}
+
+<style>
+	video {
+		flex: none;
+		border: 2px solid var(--color-border-primary);
+		border-radius: var(--radius-lg);
+		max-width: none;
+	}
+
+	video:hover,
+	video.selected {
+		border-color: var(--color-accent-light);
+	}
+	.table {
+		width: var(--size-20);
+		height: var(--size-20);
+		object-fit: cover;
+	}
+
+	.gallery {
+		max-height: var(--size-20);
+		object-fit: cover;
+	}
+</style>

ui/packages/app/src/components/File/File.svelte

@@ -3,6 +3,7 @@
 	import type { FileData } from "@gradio/upload";
 	import { normalise_file } from "@gradio/upload";
 	import { Block } from "@gradio/atoms";
+	import UploadText from "../UploadText.svelte";
 
 	import StatusTracker from "../StatusTracker/StatusTracker.svelte";
 	import type { LoadingStatus } from "../StatusTracker/types";
@@ -49,10 +50,9 @@
 			on:change
 			on:clear
 			on:upload
-			drop_text={$_("interface.drop_file")}
-			or_text={$_("or")}
-			upload_text={$_("interface.click_to_upload")}
-		/>
+		>
+			<UploadText type="file" />
+		</FileUpload>
 	{:else}
 		<File value={_value} {label} {show_label} />
 	{/if}

ui/packages/app/src/components/Form/Form.svelte

@@ -1,6 +1,30 @@
-<div
-	class="gr-form flex border-solid border bg-gray-200 dark:bg-gray-700 gap-px rounded-lg flex-wrap"
-	style="flex-direction: inherit"
->
+<script lang="ts">
+	export let visible = true;
+</script>
+
+<div class="form" class:hidden={!visible}>
 	<slot />
 </div>
+
+<style>
+	div {
+		display: flex;
+		flex-direction: inherit;
+		flex-wrap: wrap;
+		gap: 1px;
+		border: 1px solid var(--color-border-primary);
+		border-radius: var(--radius-lg);
+		background: var(--color-border-primary);
+		overflow: hidden;
+	}
+
+	div :global(.block) {
+		box-shadow: none !important;
+		border-width: 0px !important;
+		border-radius: 0px !important;
+	}
+
+	.hidden {
+		display: none;
+	}
+</style>

ui/packages/app/src/components/Gallery/ClearIcon.svelte

@@ -1,28 +0,0 @@
-<svg
-	width="1em"
-	height="1em"
-	viewBox="0 0 24 24"
-	version="1.1"
-	xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	xml:space="preserve"
-	style="
-		fill-rule: evenodd;
-		clip-rule: evenodd;
-		stroke-linecap: round;
-		stroke-linejoin: round;
-	"
->
-	<g
-		transform="matrix(1.14096,-0.140958,-0.140958,1.14096,-0.0559523,0.0559523)"
-	>
-		<path
-			d="M18,6L6.087,17.913"
-			style="fill: none; fill-rule: nonzero; stroke: black; stroke-width: 2px"
-		/>
-	</g>
-	<path
-		d="M4.364,4.364L19.636,19.636"
-		style="fill: none; fill-rule: nonzero; stroke: black; stroke-width: 2px"
-	/>
-</svg>

ui/packages/app/src/components/Gallery/Gallery.svelte

@@ -1,15 +1,10 @@
 <script lang="ts">
-	import { Block, BlockLabel } from "@gradio/atoms";
-	import { ModifyUpload } from "@gradio/upload";
-	import { tick } from "svelte";
+	import { Block } from "@gradio/atoms";
+	import { Gallery } from "@gradio/gallery";
 	import type { LoadingStatus } from "../StatusTracker/types";
 	import StatusTracker from "../StatusTracker/StatusTracker.svelte";
 	import type { Styles } from "@gradio/utils";
-	import { get_styles } from "@gradio/utils";
-	import { Image } from "@gradio/icons";
 	import type { FileData } from "@gradio/upload";
-	import { normalise_file } from "@gradio/upload";
-	import { _ } from "svelte-i18n";
 
 	export let loading_status: LoadingStatus;
 	export let show_label: boolean;
@@ -20,82 +15,8 @@
 	export let visible: boolean = true;
 	export let value: Array<string> | Array<FileData> | null = null;
 	export let style: Styles = {};
-
-	$: _value =
-		value === null
-			? null
-			: value.map((img) =>
-					Array.isArray(img)
-						? [normalise_file(img[0], root_url ?? root), img[1]]
-						: [normalise_file(img, root_url ?? root), null]
-			  );
-
-	let prevValue: string[] | FileData[] | null = null;
-	let selected_image: number | null = null;
-	$: if (prevValue !== value) {
-		selected_image = null;
-		prevValue = value;
-	}
-
-	$: previous =
-		((selected_image ?? 0) + (_value?.length ?? 0) - 1) % (_value?.length ?? 0);
-	$: next = ((selected_image ?? 0) + 1) % (_value?.length ?? 0);
-
-	function on_keydown(e: KeyboardEvent) {
-		switch (e.code) {
-			case "Escape":
-				e.preventDefault();
-				selected_image = null;
-				break;
-			case "ArrowLeft":
-				e.preventDefault();
-				selected_image = previous;
-				break;
-			case "ArrowRight":
-				e.preventDefault();
-				selected_image = next;
-				break;
-			default:
-				break;
-		}
-	}
-
-	$: scroll_to_img(selected_image);
-
-	let el: Array<HTMLButtonElement> = [];
-	let container: HTMLDivElement;
-
-	async function scroll_to_img(index: number | null) {
-		if (typeof index !== "number") return;
-		await tick();
-
-		el[index].focus();
-
-		const { left: container_left, width: container_width } =
-			container.getBoundingClientRect();
-		const { left, width } = el[index].getBoundingClientRect();
-
-		const relative_left = left - container_left;
-
-		const pos =
-			relative_left + width / 2 - container_width / 2 + container.scrollLeft;
-
-		container.scrollTo({
-			left: pos < 0 ? 0 : pos,
-			behavior: "smooth"
-		});
-	}
-
-	$: can_zoom = window_height >= height;
-
-	$: ({ classes } = get_styles(style, ["grid"]));
-
-	let height = 0;
-	let window_height = 0;
 </script>
 
-<svelte:window bind:innerHeight={window_height} />
-
 <Block
 	{visible}
 	variant="solid"
@@ -105,115 +26,5 @@
 	disable={typeof style.container === "boolean" && !style.container}
 >
 	<StatusTracker {...loading_status} />
-	{#if show_label}
-		<BlockLabel
-			{show_label}
-			Icon={Image}
-			label={label || "Gallery"}
-			disable={typeof style.container === "boolean" && !style.container}
-		/>
-	{/if}
-	{#if value === null || _value === null}
-		<div class="h-full min-h-[15rem] flex justify-center items-center">
-			<div class="h-5 dark:text-white opacity-50"><Image /></div>
-		</div>
-	{:else}
-		{#if selected_image !== null}
-			<div
-				on:keydown={on_keydown}
-				class="absolute group inset-0 z-10 flex flex-col bg-white/90 dark:bg-gray-900 backdrop-blur h-full"
-				class:min-h-[350px]={style.height !== "auto"}
-				class:max-h-[55vh]={style.height !== "auto"}
-				class:xl:min-h-[450px]={style.height !== "auto"}
-			>
-				<ModifyUpload on:clear={() => (selected_image = null)} />
-
-				<img
-					on:click={() => (selected_image = next)}
-					class="w-full object-contain h-[calc(100%-50px)"
-					src={_value[selected_image][0].data}
-					alt={_value[selected_image][1] || ""}
-					title={_value[selected_image][1] || null}
-					style="height: calc(100% - {_value[selected_image][1]
-						? '80px'
-						: '60px'})"
-				/>
-				{#if _value[selected_image][1]}
-					<div class="bottom-[50px] absolute z-[5] flex justify-center w-full">
-						<div
-							class=" dark:text-gray-200 font-semibold px-3 py-1 max-w-full truncate"
-						>
-							{_value[selected_image][1]}
-						</div>
-					</div>
-				{/if}
-				<div
-					bind:this={container}
-					class="absolute h-[60px] overflow-x-scroll scroll-hide w-full bottom-0 flex gap-1.5 items-center py-2 text-sm px-3 justify-center"
-				>
-					{#each _value as image, i}
-						<button
-							bind:this={el[i]}
-							on:click={() => (selected_image = i)}
-							class="gallery-item !flex-none !h-9 !w-9 transition-all duration-75 {selected_image ===
-							i
-								? '!ring-2 !ring-orange-500 hover:!ring-orange-500'
-								: 'scale-90 transform'}"
-						>
-							<img
-								class="h-full w-full overflow-hidden object-contain"
-								src={image[0].data}
-								title={image[1] || null}
-								alt={image[1] || null}
-							/>
-						</button>
-					{/each}
-				</div>
-			</div>
-		{/if}
-
-		<div
-			bind:clientHeight={height}
-			class="overflow-y-auto h-full p-2"
-			class:min-h-[350px]={style.height !== "auto"}
-			class:max-h-[55vh]={style.height !== "auto"}
-			class:xl:min-h-[450px]={style.height !== "auto"}
-		>
-			{#if _value.length === 0}
-				<div class="h-full min-h-[15rem] flex justify-center items-center">
-					<div class="h-5 dark:text-white opacity-50"><Image /></div>
-				</div>
-			{:else}
-				<div class="grid gap-2 {classes}" class:pt-6={show_label}>
-					{#each _value as [image, caption], i}
-						<button
-							class="gallery-item group"
-							on:click={() => (selected_image = can_zoom ? i : selected_image)}
-						>
-							<img
-								alt={caption || ""}
-								class="h-full w-full overflow-hidden object-contain"
-								src={typeof image === "string" ? image : image.data}
-							/>
-							{#if caption}
-								<div class="bottom-0 absolute z-[5] flex justify-end w-full">
-									<div
-										class="bg-gray-50 dark:bg-gray-700 dark:text-gray-200 text-xs border-t border-l dark:border-gray-600 font-semibold px-3 py-1 rounded-tl-lg group-hover:opacity-50 max-w-full truncate"
-									>
-										{caption}
-									</div>
-								</div>
-							{/if}
-						</button>
-					{/each}
-				</div>
-			{/if}
-		</div>
-	{/if}
+	<Gallery {label} {value} {style} {show_label} {root} {root_url} />
 </Block>
-
-<style lang="postcss">
-	.gallery-item {
-		@apply rounded shadow-sm relative aspect-square h-full hover:brightness-110 focus:ring-blue-500 focus:ring-2 ring-1 ring-gray-200 hover:ring hover:ring-orange-300 w-full overflow-hidden bg-gray-100 dark:bg-gray-900 object-fill outline-none;
-	}
-</style>

ui/packages/app/src/components/Gallery/ImageIcon.svelte

@@ -1,17 +0,0 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	width="1em"
-	height="1em"
-	viewBox="0 0 24 24"
-	fill="none"
-	stroke="currentColor"
-	stroke-width="1.5"
-	stroke-linecap="round"
-	stroke-linejoin="round"
-	class="feather feather-image"
-	><rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle
-		cx="8.5"
-		cy="8.5"
-		r="1.5"
-	/><polyline points="21 15 16 10 5 21" /></svg
->

ui/packages/app/src/components/Group/Group.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import type { Styles } from "@gradio/utils";
-
 	export let elem_id: string = "";
 	export let visible: boolean = true;
 </script>
@@ -11,18 +9,20 @@
 
 <style>
 	div > :global(*:not(.absolute)) {
-		@apply !rounded-none;
+		border-radius: 0px !important;
 	}
 
 	div > :global(*:first-child) {
-		@apply !rounded-tl-lg !rounded-tr-lg;
+		border-top-right-radius: var(--radius-lg) !important;
+		border-top-left-radius: var(--radius-lg) !important;
 	}
 
 	div > :global(*:last-child) {
-		@apply !rounded-bl-lg !rounded-br-lg;
+		border-top-right-radius: var(--radius-lg) !important;
+		border-top-left-radius: var(--radius-lg) !important;
 	}
 
 	div > :global(* + *:not(.absolute)) {
-		@apply !border-t-0;
+		border-top: none !important;
 	}
 </style>

ui/packages/app/src/components/HTML/HTML.svelte

@@ -18,10 +18,7 @@
 
 <Block {visible} {elem_id} disable={true}>
 	<StatusTracker {...loading_status} variant="center" />
-	<div
-		class="transition"
-		class:opacity-20={loading_status?.status === "pending"}
-	>
+	<div class:pending={loading_status?.status === "pending"}>
 		<HTML
 			min_height={loading_status && loading_status?.status !== "complete"}
 			{value}
@@ -31,3 +28,13 @@
 		/>
 	</div>
 </Block>
+
+<style>
+	div {
+		transition: 150ms;
+	}
+
+	.pending {
+		opacity: 0.2;
+	}
+</style>

ui/packages/app/src/components/HighlightedText/HighlightedText.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import { HighlightedText } from "@gradio/highlighted-text";
-	import { Block, BlockLabel } from "@gradio/atoms";
+	import { Block, BlockLabel, Empty } from "@gradio/atoms";
 	import { TextHighlight } from "@gradio/icons";
 	import StatusTracker from "../StatusTracker/StatusTracker.svelte";
 	import type { LoadingStatus } from "../StatusTracker/types";
@@ -44,8 +44,8 @@
 	{#if value}
 		<HighlightedText {value} {show_legend} color_map={style.color_map} />
 	{:else}
-		<div class="h-full min-h-[6rem] flex justify-center items-center">
-			<div class="h-5 dark:text-white opacity-50"><TextHighlight /></div>
-		</div>
+		<Empty>
+			<TextHighlight />
+		</Empty>
 	{/if}
 </Block>

ui/packages/app/src/components/Image/Image.svelte

@@ -6,6 +6,7 @@
 	import { Component as StatusTracker } from "../StatusTracker/";
 	import type { LoadingStatus } from "../StatusTracker/types";
 	import type { Styles } from "@gradio/utils";
+	import UploadText from "../UploadText.svelte";
 
 	export let elem_id: string = "";
 	export let visible: boolean = true;
@@ -64,10 +65,9 @@
 			{show_label}
 			{pending}
 			{streaming}
-			drop_text={$_("interface.drop_image")}
-			or_text={$_("or")}
-			upload_text={$_("interface.click_to_upload")}
 			{mirror_webcam}
-		/>
+		>
+			<UploadText type="image" />
+		</Image>
 	{/if}
 </Block>

ui/packages/app/src/components/Interpretation/Interpretation.svelte

@@ -18,6 +18,3 @@
 		interpretation={value.interpretation}
 	/>
 {/if}
-
-<style lang="postcss" global>
-</style>

ui/packages/app/src/components/Interpretation/InterpretationComponents/Audio.svelte

@@ -5,14 +5,25 @@
 	export let label: string = "";
 </script>
 
-<div class="input-audio">
+<div>
 	<BlockTitle>{label}</BlockTitle>
-	<div class="interpret_range flex">
+	<div class="range">
 		{#each interpretation as interpret_value}
 			<div
-				class="flex-1 h-4"
+				class="item"
 				style={"background-color: " + getSaliencyColor(interpret_value)}
 			/>
 		{/each}
 	</div>
 </div>
+
+<style>
+	.range {
+		display: flex;
+	}
+
+	.item {
+		display: flex;
+		height: var(--size-4);
+	}
+</style>

ui/packages/app/src/components/Interpretation/InterpretationComponents/Checkbox.svelte

@@ -7,21 +7,18 @@
 	export let interpretation: [number, number];
 </script>
 
-<div class="input-checkbox inline-block">
+<div class="input-checkbox">
 	<BlockTitle>{label}</BlockTitle>
-	<button
-		class="checkbox-item py-2 px-3 rounded cursor-pointer flex gap-1"
-		class:selected={original}
-	>
+	<button class="checkbox-item" class:selected={original}>
 		<div
-			class="checkbox w-4 h-4 bg-white flex items-center justify-center border border-gray-400 box-border"
+			class="checkbox"
 			style={"background-color: " + getSaliencyColor(interpretation[0])}
 		/>
 		<div
-			class="checkbox w-4 h-4 bg-white flex items-center justify-center border border-gray-400 box-border"
+			class="checkbox"
 			style={"background-color: " + getSaliencyColor(interpretation[1])}
 		>
-			<svg class="check h-3 w-4" viewBox="-10 -10 20 20">
+			<svg viewBox="-10 -10 20 20">
 				<line
 					x1="-7.5"
 					y1="0"
@@ -46,15 +43,46 @@
 </div>
 
 <style lang="postcss">
-	.selected .check {
-		@apply opacity-100;
+	.input-checkbox {
+		display: inline-block;
+	}
+
+	svg {
+		width: var(--size-4);
+		height: var(--size-3);
+	}
+	.selected svg {
+		opacity: 1;
 	}
 	.input-checkbox {
-		.checkbox-item {
-			@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
-		}
-		.checkbox-item.selected {
-			@apply bg-amber-500 dark:bg-red-600 text-white;
-		}
+		display: flex;
+		gap: var(--size-1);
+		cursor: pointer;
+		border-radius: var(--radius-md);
+		padding: var(--size-2) var(--size-3);
+	}
+
+	.checkbox {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border: 1px solid var(--color-border-primary);
+		background: var(--color-background-primary);
+		width: var(--size-4);
+		height: var(--size-4);
+	}
+
+	.checkbox-item {
+		transition: 150ms;
+		box-shadow: var(--shadow-drop);
+		background: var(--color-background-primary);
+	}
+
+	.checkbox-item:hover {
+		box-shadow: var(--shadow-drop-lg);
+	}
+	.checkbox-item.selected {
+		background: var(--color-accent-base);
+		color: white;
 	}
 </style>

ui/packages/app/src/components/Interpretation/InterpretationComponents/CheckboxGroup.svelte

@@ -8,22 +8,19 @@
 	export let label: string = "";
 </script>
 
-<div class="input-checkbox-group flex flex-wrap gap-2">
+<div class="input-checkbox-group">
 	<BlockTitle>{label}</BlockTitle>
 	{#each choices as choice, i}
-		<button
-			class="checkbox-item py-2 px-3 font-semibold rounded cursor-pointer flex items-center gap-1"
-			class:selected={original.includes(choice)}
-		>
+		<button class="checkbox-item " class:selected={original.includes(choice)}>
 			<div
-				class="checkbox w-4 h-4 bg-white flex items-center justify-center border border-gray-400 box-border"
+				class="checkbox"
 				style={"background-color: " + getSaliencyColor(interpretation[i][0])}
 			/>
 			<div
-				class="checkbox w-4 h-4 bg-white flex items-center justify-center border border-gray-400 box-border"
+				class="checkbox"
 				style={"background-color: " + getSaliencyColor(interpretation[i][1])}
 			>
-				<svg class="check h-3 w-4" viewBox="-10 -10 20 20">
+				<svg viewBox="-10 -10 20 20">
 					<line
 						x1="-7.5"
 						y1="0"
@@ -50,21 +47,61 @@
 </div>
 
 <style lang="postcss">
-	.selected .check {
-		@apply opacity-100;
+	svg {
+		width: var(--size-4);
+		height: var(--size-3);
+	}
+	.selected svg {
+		opacity: 1;
 	}
 	.input-checkbox-group {
-		.checkbox-item {
-			@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
-		}
-		.checkbox {
-			@apply bg-gray-100 dark:bg-gray-400 transition;
-		}
-		.checkbox-item.selected {
-			@apply bg-amber-500 dark:bg-red-600 text-white;
-		}
-		.selected .checkbox {
-			@apply bg-amber-600 dark:bg-red-700;
-		}
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--size-2);
+	}
+
+	.checkbox-item {
+		display: flex;
+		align-items: center;
+		gap: var(--size-1);
+		transition: 150ms;
+		cursor: pointer;
+		box-shadow: var(--shadow-drop);
+		border-radius: var(--radius-md);
+		background: var(--color-background-primary);
+		padding: var(--size-2) var(--size-3);
+		font-weight: var(--weight-semibold);
+	}
+
+	.checkbox-item:hover {
+		box-shadow: var(--shadow-drop-lg);
+	}
+
+	.checkbox {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border: 1px solid var(--color-border-primary);
+		background: var(--color-background-primary);
+		width: var(--size-4);
+		height: var(--size-4);
+	}
+	.checkbox-item.selected {
+		background: var(--color-accent-base);
+		color: white;
+	}
+	.selected .checkbox {
+		background: var(--color-accent-base);
+	}
+
+	.checkbox-item {
+		transition: 150ms;
+		box-shadow: var(--shadow-drop);
+		background: var(--color-background-primary);
+	}
+
+	.checkbox-item.selected {
+		background: var(--color-accent-base);
+		color: white;
 	}
 </style>

ui/packages/app/src/components/Interpretation/InterpretationComponents/Dropdown.svelte

@@ -7,12 +7,12 @@
 	export let label: string = "";
 </script>
 
-<div class="input-dropdown">
+<div>
 	<BlockTitle>{label}</BlockTitle>
 	<ul class="dropdown-menu">
 		{#each choices as choice, i}
 			<li
-				class="dropdown-item first:rounded-t transition last:rounded-b py-2 px-3 block whitespace-nowrap cursor-pointer"
+				class="dropdown-item"
 				style={"background-color: " + getSaliencyColor(interpretation[i])}
 			>
 				{choice}
@@ -21,16 +21,29 @@
 	</ul>
 </div>
 
-<style lang="postcss" global>
-	.input-dropdown {
-		.selector {
-			@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
-		}
-		.dropdown-menu {
-			@apply shadow;
-		}
-		.dropdown-item {
-			@apply bg-white dark:bg-gray-800 hover:font-semibold;
-		}
+<style>
+	.dropdown-menu {
+		box-shadow: var(--shadow-drop);
+	}
+	.dropdown-item {
+		display: block;
+		transition: 150ms;
+		cursor: pointer;
+		background: var(--color-background-primary);
+		padding: var(--size-2) var(--size-3);
+		white-space: nowrap;
+	}
+
+	.dropdown-item:first-child {
+		border-top-right-radius: var(--radius-md);
+		border-top-left-radius: var(--radius-md);
+	}
+	.dropdown-item:last-child {
+		border-bottom-right-radius: var(--radius-md);
+		border-bottom-left-radius: var(--radius-md);
+	}
+
+	.dropdown-item:hover {
+		font-weight: var(--weight-semibold);
 	}
 </style>

ui/packages/app/src/components/Interpretation/InterpretationComponents/Image.svelte

@@ -63,20 +63,46 @@
 
 <div class="input-image">
 	<BlockTitle>{label}</BlockTitle>
-	<div
-		class="image-preview w-full h-60 flex justify-center items-center bg-gray-200 dark:bg-gray-600 relative"
-	>
+	<div class="image-preview">
 		<!-- svelte-ignore a11y-missing-attribute -->
-		<div
-			class="interpretation w-full h-full absolute top-0 left-0 flex justify-center items-center opacity-90 hover:opacity-20 transition"
-		>
+		<div class="interpretation">
 			<canvas bind:this={saliency_layer} />
 		</div>
 		<!-- svelte-ignore a11y-missing-attribute -->
-		<img
-			class="w-full h-full object-contain"
-			bind:this={image}
-			src={original}
-		/>
+		<img bind:this={image} src={original} />
 	</div>
 </div>
+
+<style>
+	.image-preview {
+		display: flex;
+		position: relative;
+		justify-content: center;
+		align-items: center;
+		background: var(--color-background-primary);
+		width: var(--size-full);
+		height: var(--size-60);
+	}
+
+	.interpretation {
+		display: flex;
+		position: absolute;
+		top: 0;
+		left: 0;
+		justify-content: center;
+		align-items: center;
+		opacity: 0.9;
+		transition: 150ms;
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+
+	.interpretation:hover {
+		opacity: 0.2;
+	}
+	img {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: contain;
+	}
+</style>