mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
443 lines
15 KiB
Plaintext
443 lines
15 KiB
Plaintext
<div class="row">
|
|
<div class="col s12 m12 l6">
|
|
<br />
|
|
|
|
<div class="center" style="padding: 10px">
|
|
<%= link_to asset_path('basil/character-jam.png') do %>
|
|
<%= image_tag 'basil/character-jam.png', style: 'width: 100%' %>
|
|
<% end %>
|
|
<br />
|
|
Thank you for participating!
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col s12 m12 l6">
|
|
<h2 style="font-size: 1.6rem; margin-top: 3rem">Together, we visualized 1,611 characters!</h2>
|
|
<p>
|
|
In the spirit of AI transparency, I've compiled some aggregate visualizations of the kinds of characters
|
|
that were most — and least — visualized during this VizJam.
|
|
</p>
|
|
|
|
<ul class="collapsible">
|
|
<li>
|
|
<div class="collapsible-header"><i class="material-icons">bar_chart</i> Age</div>
|
|
<div class="collapsible-body white">
|
|
<%= column_chart(
|
|
{ "Infant" => 36, "Child" => 33, "Teenager" => 275, "Young Adult" => 467, "Adult" => 751, "Old" => 146, "Very Old" => 24 },
|
|
colors: ['#2196F3'],
|
|
max: 760,
|
|
label: 'Visualizations'
|
|
)
|
|
%>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="collapsible-header"><i class="material-icons">pie_chart</i> Gender</div>
|
|
<div class="collapsible-body white">
|
|
<%= pie_chart(
|
|
{ "Male" => 508, "Female" => 628, "Ambiguous" => 92, "Transgender" => 63, "Non-binary" => 81, "Agender" => 33, "Androgenous" => 146, "Genderqueer" => 28 },
|
|
legend: 'right',
|
|
suffix: ' visualizations'
|
|
)
|
|
%>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="collapsible-header"><i class="material-icons">bar_chart</i> Skin tone</div>
|
|
<div class="collapsible-body white">
|
|
<%= bar_chart(
|
|
{"Light"=>348,
|
|
"Pale"=>314,
|
|
"Olive"=>233,
|
|
"Black"=>227,
|
|
"Brown"=>188,
|
|
"White"=>185,
|
|
"Fair"=>169,
|
|
"Dark"=>165,
|
|
"Tan"=>153,
|
|
"Medium"=>151,
|
|
"Freckled"=>99,
|
|
"Blue"=>42,
|
|
"Grey"=>29,
|
|
"Silver"=>27,
|
|
"Chocolate"=>27,
|
|
"Gold"=>25,
|
|
"Green"=>24,
|
|
"Speckled"=>22,
|
|
"Albino"=>21,
|
|
"Purple"=>19,
|
|
"Pink"=>17,
|
|
"Red"=>15,
|
|
"Yellow"=>11,
|
|
"Orange"=>10},
|
|
colors: ['#2196F3'],
|
|
label: 'Visualizations',
|
|
height: '600px',
|
|
max: 350
|
|
)
|
|
%>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="collapsible-header"><i class="material-icons">bar_chart</i> Face</div>
|
|
<div class="collapsible-body white">
|
|
<%= bar_chart(
|
|
{"Brown"=>285,
|
|
"Blue"=>218,
|
|
"Green"=>161,
|
|
"Amber"=>96,
|
|
"Grey"=>90,
|
|
"Hazel"=>87,
|
|
"Topaz"=>66,
|
|
"Black"=>61,
|
|
"Amethyst"=>50,
|
|
"Red"=>43,
|
|
"Violet"=>43,
|
|
"White"=>28,
|
|
"Indigo"=>25},
|
|
colors: ['#2196F3'],
|
|
title: 'Eye color',
|
|
height: '500px',
|
|
label: 'Visualizations'
|
|
)
|
|
%>
|
|
<br />
|
|
<%= bar_chart({
|
|
"Stubble"=>168,
|
|
"Beard"=>125,
|
|
"Chinstrap"=>114,
|
|
"Mustache"=>113,
|
|
"Goatee"=>61,
|
|
"Patchy"=>40,
|
|
"Sideburns"=>28,
|
|
"Mutton chops"=>16,
|
|
"Soul patch"=>9,
|
|
"Neckbeard"=>7,
|
|
"Horseshoe mustache"=>5,
|
|
"Fu Manchu"=>5,
|
|
"Handlebar mustache"=>4,
|
|
"Chin curtain"=>3},
|
|
title: 'Facial hair (if any)',
|
|
colors: ['#2196F3'],
|
|
max: 170,
|
|
height: '500px',
|
|
label: 'Visualizations'
|
|
)
|
|
%>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="collapsible-header"><i class="material-icons">bar_chart</i> Hair</div>
|
|
<div class="collapsible-body white">
|
|
<%= bar_chart({
|
|
"Black"=>375,
|
|
"Brown"=>359,
|
|
"Blonde"=>216,
|
|
"Red"=>93,
|
|
"Blue"=>88,
|
|
"White"=>79,
|
|
"Auburn"=>68,
|
|
"Orange"=>54,
|
|
"Pink"=>53,
|
|
"Purple"=>48,
|
|
"Greying"=>40,
|
|
"Bleached"=>39,
|
|
"Grey"=>32,
|
|
"Rainbow"=>30,
|
|
"Green"=>29,
|
|
"Bald"=>7},
|
|
colors: ['#2196F3'],
|
|
title: 'Colors',
|
|
height: '500px',
|
|
label: 'Visualizations')
|
|
%>
|
|
<br />
|
|
<%=
|
|
bar_chart({
|
|
"Long"=>617,
|
|
"Medium"=>394,
|
|
"Wavy"=>288,
|
|
"Straight"=>242,
|
|
"Short"=>231,
|
|
"Curly"=>186,
|
|
"Ponytail"=>111,
|
|
"Bangs"=>99,
|
|
"Braided"=>97,
|
|
"Parted"=>88,
|
|
"Fringe"=>70,
|
|
"Bob cut"=>59,
|
|
"Emo"=>48,
|
|
"Slicked back"=>46,
|
|
"Dreadlocks"=>46,
|
|
"Pixie"=>41,
|
|
"Bun"=>40,
|
|
"Feathered"=>39,
|
|
"Afro"=>36,
|
|
"Rocker"=>31,
|
|
"Spiked"=>29,
|
|
"Pigtails"=>22,
|
|
"Mop-top"=>20,
|
|
"Buzzcut"=>20,
|
|
"Bald"=>19,
|
|
"Crewcut"=>18,
|
|
"Balding"=>13,
|
|
"Cornrows"=>11,
|
|
"Flattop"=>10,
|
|
"Chignon"=>9,
|
|
"Bowl cut"=>9,
|
|
"Rat-tail"=>8,
|
|
"Pompadour"=>7,
|
|
"Bouffant"=>7,
|
|
"Combover"=>6},
|
|
colors: ['#2196F3'],
|
|
max: 620,
|
|
height: '900px',
|
|
title: 'Styles',
|
|
label: 'Visualizations'
|
|
)
|
|
%>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="collapsible-header"><i class="material-icons">bar_chart</i> Body</div>
|
|
<div class="collapsible-body white">
|
|
<%=
|
|
bar_chart({
|
|
"Lean"=>395,
|
|
"Thin"=>336,
|
|
"Athletic"=>329,
|
|
"Curvy"=>188,
|
|
"Hourglass"=>149,
|
|
"Muscular"=>144,
|
|
"Rectangular"=>130,
|
|
"Petite"=>106,
|
|
"Round"=>77,
|
|
"Frail"=>74,
|
|
"Big-boned"=>73,
|
|
"Pear-shaped"=>73,
|
|
"Underweight"=>66,
|
|
"Overweight"=>60
|
|
},
|
|
colors: ['#2196F3'],
|
|
height: '500px',
|
|
label: 'Visualizations')
|
|
%>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="collapsible-header"><i class="material-icons">bar_chart</i> Non-human races</div>
|
|
<div class="collapsible-body white">
|
|
<%= bar_chart(
|
|
{"Angel"=>69,
|
|
"Fey"=>67,
|
|
"Fairy"=>59,
|
|
"Vampire"=>54,
|
|
"Elf"=>52,
|
|
"Animal"=>51,
|
|
"Reptilian"=>48,
|
|
"Werewolf"=>44,
|
|
"Elemental"=>33,
|
|
"Robot"=>29,
|
|
"Android"=>26,
|
|
"Bird"=>25,
|
|
"Insectoid"=>18,
|
|
"Genie"=>15,
|
|
"Orc"=>13,
|
|
"Halfling"=>13,
|
|
"Dwarf"=>11,
|
|
"Gnome"=>10,
|
|
"Arachnoid"=>10},
|
|
colors: ['#2196F3'],
|
|
max: 70,
|
|
height: '500px',
|
|
label: 'Visualizations'
|
|
)
|
|
%>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<p style="font-size: 0.8em">
|
|
If you noticed that any particular age, gender, race, or other trait produced
|
|
lower-quality images than others, please <%= link_to 'let me know', 'https://discord.gg/bDE8g5YRzp' %>
|
|
so I can continue to make our AI models work better for <em>all</em> kinds of characters!
|
|
You can also <%= link_to 'read about our commitment to Ethical AI', 'https://medium.com/indent-labs/our-commitment-to-ethical-ai-be13a37b2a7f' %>.
|
|
</p>
|
|
|
|
<br />
|
|
|
|
<div class="grey lighten-4">
|
|
<%= area_chart({
|
|
"2023-06-08"=>208,
|
|
"2023-06-09"=>515,
|
|
"2023-06-10"=>255,
|
|
"2023-06-11"=>128,
|
|
"2023-06-12"=>167,
|
|
"2023-06-13"=>338}, title: 'New visualizations per day', colors: ['#E91E63'], max: 550, height: '200px')
|
|
%>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%
|
|
@content_type = Character
|
|
singular_class_name = @content_type.name
|
|
pluralized_class_name = @content_type.name.pluralize
|
|
premium_page = !User.new.can_create?(@content_type)
|
|
%>
|
|
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<h1 class="text-center" style="font-size: 2rem">
|
|
You can still create characters and visualize them on Notebook.ai!
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="col s12">
|
|
<div class="card horizontal">
|
|
<div class="card-image">
|
|
<%= image_tag "card-headers/#{pluralized_class_name.downcase}.webp", class: 'materialboxed tooltipped', alt: "The default image used for all #{pluralized_class_name.downcase} on Notebook.ai, but you can replace it with your own uploads.", data: { tooltip: "The default image used for all #{pluralized_class_name.downcase} on Notebook.ai, but you can replace it with your own uploads."} %>
|
|
</div>
|
|
<div class="card-stacked">
|
|
<div class="card-content spaced-paragraphs">
|
|
<h1 class="card-title <%= @content_type.text_color %>">Creating <%= pluralized_class_name %> on Notebook.ai</h1>
|
|
<p><em>
|
|
<%= t("content_descriptions.#{singular_class_name.downcase}") %></em>
|
|
</p>
|
|
<p>
|
|
Creating <%= pluralized_class_name.downcase %> on Notebook.ai is easy.
|
|
</p>
|
|
<p>
|
|
To get started, just click <strong><%= pluralized_class_name %></strong> under the "Worldbuilding" header in the site sidebar.
|
|
You'll be able to see or edit all of your existing <%= singular_class_name.downcase %> pages and create new ones at any time.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col s12 m12 l5">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<h2 class="card-title">
|
|
<i class="material-icons <%= @content_type.text_color %> left">
|
|
<%= @content_type.icon %>
|
|
</i>
|
|
|
|
Get a head start with a rich
|
|
<span class="<%= @content_type.text_color %>"><%= singular_class_name.downcase %></span>
|
|
template
|
|
</h2>
|
|
<br />
|
|
|
|
<div class="spaced-paragraphs">
|
|
<p>
|
|
Templates on Notebook.ai are what help our unique worldbuilding system better understand your world.
|
|
</p>
|
|
<p>
|
|
You can fill out as little or as much as you'd like on every new <%= singular_class_name.downcase %>. You'll see
|
|
progress indicators every time you edit it to show where you can make progress on, and our system will
|
|
intelligently generate questions for you around the site that will automatically save your answers
|
|
to the proper place on your <%= singular_class_name.downcase %> page.
|
|
</p>
|
|
<p>
|
|
Templates are also fully customizable across every <%= singular_class_name.downcase %> in your notebook.
|
|
</p>
|
|
<p>
|
|
You can browse the default template for <%= pluralized_class_name.downcase %> here; click any category
|
|
to see its questions.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s12 m12 l7">
|
|
<ul class="collapsible popout">
|
|
<%
|
|
YAML.load_file(Rails.root.join('config', 'attributes', "#{singular_class_name.downcase}.yml")).map do |category_name, category_details|
|
|
%>
|
|
<% next if category_name == :contributors %>
|
|
<li>
|
|
<div class="collapsible-header <%= @content_type.color %> darken-3 white-text">
|
|
<i class="material-icons"><%= category_details[:icon] %></i>
|
|
<%= category_details[:label] %>
|
|
</div>
|
|
<div class="collapsible-body">
|
|
<% if category_name == :gallery %>
|
|
<p>
|
|
This category lets you upload images to this <%= singular_class_name.downcase %>'s notebook page.
|
|
</p>
|
|
<br />
|
|
<p>
|
|
It's great if you have sketches or artwork for your <%= singular_class_name.downcase %>,
|
|
but also works well for collecting visual inspiration, too!
|
|
</p>
|
|
<% end %>
|
|
<% category_details.fetch(:attributes, []).each do |field| %>
|
|
<div>
|
|
<strong><%= field[:label] %></strong>
|
|
</div>
|
|
<div>
|
|
<% if field[:field_type] == 'link' || field[:field_type] == 'universe' %>
|
|
This field allows you to link your other Notebook.ai pages to this <%= singular_class_name.downcase %>.
|
|
<% elsif field[:field_type] == 'tags' %>
|
|
This field lets you add clickable tags to your <%= pluralized_class_name.downcase %>.
|
|
<% else %>
|
|
<%=
|
|
I18n.translate "attributes.#{singular_class_name.downcase}.#{field[:label].downcase.gsub(/\s/, '_')}",
|
|
scope: :serendipitous_questions,
|
|
name: "this #{singular_class_name.downcase}",
|
|
default: 'Write as little or as much as you want!'
|
|
%>
|
|
<br />
|
|
<span class="grey-text"><%= field[:description].try(:html_safe) %></span>
|
|
<% end %>
|
|
</div>
|
|
<br />
|
|
<% end %>
|
|
</div>
|
|
</li>
|
|
<%
|
|
end
|
|
%>
|
|
</ul>
|
|
</div>
|
|
<div class="col s12">
|
|
<div class="card horizontal">
|
|
<div class="card-image">
|
|
<%= image_tag 'basil/portrait.png', style: 'width: 420px' %>
|
|
</div>
|
|
<div class="card-stacked">
|
|
<div class="card-content">
|
|
<div class="card-title">
|
|
<i class="pink-text material-icons left">palette</i>
|
|
Visualize your characters
|
|
</div>
|
|
<p>
|
|
After you've created a character on Notebook.ai, visualizing them is as easy as picking an image style and clicking a button.
|
|
Everything you've written about what they look like on their notebook page is automatically included.
|
|
</p>
|
|
<br />
|
|
<p>
|
|
Image visualization is a Premium feature, but you can generate up to 100 images for free to try it out for yourself.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<% if user_signed_in? %>
|
|
<div class="text-center">
|
|
<div>Already logged in? Great!</div>
|
|
<%= link_to 'Visualize your ideas', basil_path, class: 'btn btn-large hoverable blue white-text' %>
|
|
</div>
|
|
<% else %>
|
|
<div class="text-center">
|
|
<div>Want to keep visualizing your ideas?</div>
|
|
<%= link_to 'Get started with Notebook.ai', new_registration_path(User), class: 'btn btn-large hoverable blue white-text' %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% 10.times do %><br /><% end %>
|