app/views/basil/_jam_report.html.erb
<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 %>