Skip to content

Commit c052a6c

Browse files
drusepthdrusepth
committed
redesign opencharacters export page with tailwind
1 parent 0062703 commit c052a6c

File tree

1 file changed

+91
-76
lines changed

1 file changed

+91
-76
lines changed

‎app/views/conversation/character_landing.html.erb‎

Lines changed: 91 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,109 @@
1-
<div class="row">
2-
<div class="col s12 m4">
3-
<%= link_to @character do %>
4-
<%= image_tag @character.random_image_including_private, style: "width: 100%" %>
5-
<% end %>
1+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
2+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
3+
<div class="md:col-span-1 space-y-6">
4+
<%= link_to @character do %>
5+
<%= image_tag @character.random_image_including_private, class: "w-full rounded-xl shadow-md object-cover" %>
6+
<% end %>
67

7-
<div class="card">
8-
<div class="card-content">
9-
<div class="card-title">
10-
<strong>Talk to <%= @character.name %></strong>
8+
<div class="bg-white dark:bg-gray-800 shadow rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
9+
<div class="p-6">
10+
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
11+
Talk to <%= @character.name %>
12+
</h2>
13+
<p class="text-gray-600 dark:text-gray-300">
14+
You can now export your Notebook.ai characters to the open-source project OpenCharacters
15+
and talk to them in real-time! This is a great way to get to know your characters a little
16+
better or to roleplay with them.
17+
</p>
1118
</div>
12-
<p>
13-
You can now export your Notebook.ai characters to the open-source project OpenCharacters
14-
and talk to them in real-time! This is a great way to get to know your characters a little
15-
better or to roleplay with them.
16-
</p>
1719
</div>
18-
</div>
1920

20-
<p style="font-size: 0.9em">
21-
The fields will be used to create a conversational AI persona of
22-
your character. You can edit these fields before exporting if you want to change how your
23-
character talks. If your character is public, you can also share this page with others
24-
to let them talk to your character, too!
25-
</p>
26-
<div>
27-
<%= link_to "Back to notebook page", @character %>
21+
<p class="text-sm text-gray-500 dark:text-gray-400">
22+
The fields will be used to create a conversational AI persona of
23+
your character. You can edit these fields before exporting if you want to change how your
24+
character talks. If your character is public, you can also share this page with others
25+
to let them talk to your character, too!
26+
</p>
27+
28+
<div>
29+
<%= link_to "Back to notebook page", @character, class: "text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 font-medium flex items-center gap-2" %>
30+
</div>
2831
</div>
29-
</div>
30-
<div class="col s12 m8">
31-
<%= form_tag export_character_path(@character.id), method: :post, target: '_blank' do |f| %>
3232

33-
<%= hidden_field_tag "name", @character.name %>
34-
<%= hidden_field_tag "avatar", @character.random_image_including_private %>
35-
<%# TODO background image/music/etc? %>
33+
<div class="md:col-span-2 space-y-6">
34+
<%= form_tag export_character_path(@character.id), method: :post, target: '_blank', class: "space-y-6" do |f| %>
35+
<%= hidden_field_tag "name", @character.name %>
36+
<%= hidden_field_tag "avatar", @character.random_image_including_private %>
37+
<%# TODO background image/music/etc? %>
3638

37-
<div class="card-panel">
38-
<p class="center">
39-
<strong>Persona export for <%= @character.name %></strong>
40-
<% if user_signed_in? && @character.user_id == current_user.id %>
41-
<br />
42-
<em>(editable because you created <%= @character.name %>)</em>
43-
<% end %>
44-
</p>
45-
<br /><br />
39+
<div class="bg-white dark:bg-gray-800 shadow rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
40+
<div class="p-6">
41+
<div class="text-center mb-6">
42+
<h2 class="text-lg font-medium text-gray-900 dark:text-white">
43+
Persona export for <%= @character.name %>
44+
</h2>
45+
<% if user_signed_in? && @character.user_id == current_user.id %>
46+
<p class="text-sm text-gray-500 dark:text-gray-400 italic mt-1">
47+
(editable because you created <%= @character.name %>)
48+
</p>
49+
<% end %>
50+
</div>
4651

47-
<div class="input-field">
48-
<%= text_area_tag 'scenario', nil, disabled: false, style: 'min-height: 100px', placeholder: "Is there a specific scenario/context you want to have this conversation in?", class: 'materialize-textarea' %>
49-
<label for="scenario">Optional: Scenario</label>
50-
</div>
52+
<div class="space-y-6">
53+
<div>
54+
<label for="scenario" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Optional: Scenario</label>
55+
<div class="mt-1">
56+
<%= text_area_tag 'scenario', nil, disabled: false, placeholder: "Is there a specific scenario/context you want to have this conversation in?", class: 'shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-900 dark:border-gray-600 dark:text-white min-h-[100px]' %>
57+
</div>
58+
</div>
5159

52-
<div class="input-field">
53-
<%= text_area_tag 'char_greeting', @first_greeting, disabled: false, placeholder: "This will be the first thing your character says to you. It can be a simple greeting, or you can use it to set a specific topic, tone, or speaking style.", class: 'materialize-textarea' %>
54-
<label for="char_greeting">First greeting from <%= @character.name %></label>
55-
</div>
60+
<div>
61+
<label for="char_greeting" class="block text-sm font-medium text-gray-700 dark:text-gray-300">First greeting from <%= @character.name %></label>
62+
<div class="mt-1">
63+
<%= text_area_tag 'char_greeting', @first_greeting, disabled: false, placeholder: "This will be the first thing your character says to you. It can be a simple greeting, or you can use it to set a specific topic, tone, or speaking style.", class: 'shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-900 dark:border-gray-600 dark:text-white min-h-[100px]' %>
64+
</div>
65+
</div>
5666

57-
<div class="input-field">
58-
<%= text_area_tag 'personality', @personality, disabled: false, class: 'materialize-textarea' %>
59-
<label for="personality">Brief personality</label>
60-
</div>
67+
<div>
68+
<label for="personality" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Brief personality</label>
69+
<div class="mt-1">
70+
<%= text_area_tag 'personality', @personality, disabled: false, class: 'shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-900 dark:border-gray-600 dark:text-white min-h-[100px]' %>
71+
</div>
72+
</div>
6173

62-
<div class="input-field">
63-
<%= text_area_tag 'description', @description, disabled: false, class: 'materialize-textarea' %>
64-
<label for="description">In-depth personality</label>
65-
</div>
74+
<div>
75+
<label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">In-depth personality</label>
76+
<div class="mt-1">
77+
<%= text_area_tag 'description', @description, disabled: false, class: 'shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-900 dark:border-gray-600 dark:text-white min-h-[200px]' %>
78+
</div>
79+
</div>
6680

67-
<div class="input-field">
68-
<%= text_area_tag 'example_dialogue', nil, disabled: false, style: 'min-height: 100px', placeholder: "If you have any dialogue examples, quotes, or other phrases your character says, you can use this field to include them and adjust their speaking style closer to the examples. Write as little or as much as you'd like!", class: 'materialize-textarea' %>
69-
<label for="example_dialogue">Optional: More dialogue examples</label>
81+
<div>
82+
<label for="example_dialogue" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Optional: More dialogue examples</label>
83+
<div class="mt-1">
84+
<%= text_area_tag 'example_dialogue', nil, disabled: false, placeholder: "If you have any dialogue examples, quotes, or other phrases your character says, you can use this field to include them and adjust their speaking style closer to the examples. Write as little or as much as you'd like!", class: 'shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-900 dark:border-gray-600 dark:text-white min-h-[100px]' %>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
7089
</div>
71-
</div>
7290

73-
<div class="card-panel">
74-
<div class="center">
75-
<strong>Note: An OpenAI API key is required by OpenCharacters</strong>
91+
<div class="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-xl p-6">
92+
<div class="text-center mb-2">
93+
<strong class="text-blue-900 dark:text-blue-300">Note: An OpenAI API key is required by OpenCharacters</strong>
94+
</div>
95+
<p class="text-sm text-blue-800 dark:text-blue-400 text-center">
96+
OpenCharacters uses this persona data with OpenAI's GPT models
97+
in a web app that runs entirely in your browser, rather than being hosted or stored on any server.
98+
This means that you will need a valid OpenAI key to use OpenCharacters.
99+
</p>
76100
</div>
77-
78-
<p>
79-
OpenCharacters uses this persona data with OpenAI's GPT models
80-
in a web app that runs entirely in your browser, rather than being hosted or stored on any server.
81-
This means that you will need a valid OpenAI key to use OpenCharacters.
82-
</p>
83-
</div>
84101

85-
<br />
86-
<div class="center">
87-
<%= submit_tag "Chat with #{@character.name}", class: 'hoverable btn blue white-text' %>
88-
<span class="grey-text text-darken-1" style="margin-left: 0.5rem">using OpenCharacters</span>
89-
</div>
90-
91-
<% 10.times do %><br /><% end %>
92-
<% end %>
102+
<div class="flex items-center justify-center pt-4 pb-12">
103+
<%= submit_tag "Chat with #{@character.name}", class: 'inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200 cursor-pointer' %>
104+
<span class="text-gray-500 dark:text-gray-400 ml-3 text-sm">using OpenCharacters</span>
105+
</div>
106+
<% end %>
107+
</div>
93108
</div>
94109
</div>

0 commit comments

Comments
 (0)