init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
title: Fine-Tune an Agent with an LLM
type: enterprise
group: Chat
order: 2
image: /static/templates/chat-llm-eval.png
details: |
  <h1>Run live, interactive chats with any OpenAI-compatible LLM</h1>
  <dl>
    <dt>Industry Applications</dt>
    <dd>LLM fine-tuning, agent training, conversation collection, chatbot improvement, task specialization, context handling, behavior evaluation, real-world scenario testing, RLHF data collection, conversational AI development</dd>
    <dt>Associated Models</dt>
    <dd>OpenAI GPT models, fine-tuned LLMs, conversational agents, multi-turn dialogue systems</dd>
    <dt>Domain Terminology</dt>
    <dd>multi-turn conversations, LLM fine-tuning, agent specialization, context shifts, conversation-level evaluation, realistic dialogue</dd>
  </dl>
config: |
  <View>
  <Style>
      .chat {
        border: 1px solid var(--color-neutral-border);
        padding: var(--spacing-tight);
        border-radius: var(--corner-radius-medium);
        background-color: var(--color-neutral-background);
      }
 
      <!-- Styling for evaluation panel on the right-->
      .evaluation {
          border: 2px solid var(--color-accent-plum-base);
          background-color: var(--color-accent-plum-subtlest);
          color: var(--color-accent-plum-bold);
          padding: var(--spacing-tight);
          border-radius: var(--corner-radius-medium);
          margin-bottom: var(--spacing-base);
      }
 
      <!-- Styling for the instructions above the chat interface-->
      .instructions {
        color: var(--color-accent-plum-bold);
        background-color: var(--color-accent-plum-subtlest);
        padding: var(--spacing-tight);
        border: 1px solid var(--color-accent-plum-subtle);
        border-radius: var(--corner-radius-medium);
      }
      
      <!-- Allow enlarging the instruction text to better differentiate it-->
      .lsf-richtext__container.lsf-htx-richtext {
        font-size: 16px !important;
        line-height: 1.6;
      }
      <!-- Remove excess height from the chat to allow space for instruction text -->
      .htx-chat { 
        --excess-height: 300px 
      }
    </Style>
    <View style="display: flex; gap: var(--spacing-wide);">
      
      <!-- Left: chat and instructions -->
      <View className="chat" style="flex: 2;">
        
        <View className="instructions">
          <Text name="instructions" value="$text" />
        </View>
              
        <Chat name="chat" value="$chat" 
              llm="openai/gpt-4.1-nano" 
              minMessages="4" 
              editable="true" />
      </View>
 
      <!-- Right: conversation-level evaluation -->
      <View style="flex: 1;" className="evaluation">
        <Header value="Chat evaluation" size="2"/>
 
        <Header value="Did the agent answer the user's question(s)?"/>
        <Choices name="answered_rating" toName="chat" choice="single" showInline="true" required="true">
          <Choice value="5 - Yes - all of them were answered"/>
          <Choice value="4 - Mostly yes - most of them were answered"/>
          <Choice value="3 - Mixed - some yes, some no"/>
          <Choice value="2 - Mostly no - very few were answered"/>
          <Choice value="1 - No - none of them were answered"/>
        </Choices>
 
        <Header value="What types of questions were asked?"/>
        <Choices name="topics" toName="chat" choice="multiple" showInline="true">
          <Choice value="Project Setup"/>
          <Choice value="Billing"/>
          <Choice value="Request Live Support"/>
          <Choice value="Labeling Config"/>
          <Choice value="Integrations/SDK"/>
          <Choice value="Bug/Issue"/>
          <Choice value="Other"/>
        </Choices>
 
        <Header value="Comments (optional)"/>
        <TextArea name="comments" toName="chat" rows="4" placeholder="Add any notes or edge cases..."/>
      </View>
    </View>
  </View>