日常API之图灵聊天机器人

机器人是什么？可以吃吗？

   嗯，他可以和你聊天，不能吃哦。

首先需要到www.tuling123.com注册一只KEY，你才能调用机器人API哦

  一、布局

（控制台程序可以跳过这一步）本文以WPF为示例来讲解。

首先我们需要一只聊天界面，大概需要这些组件：

“发送”Button一只  TextBox一条   ScrollViewer和WrapPanel各一只。

这里我把它写成UserControl方便使用，喵。

以下是XAML布局:(ScrollViewer的Style可以删掉(如果报错))

 1 <UserControl
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 6              xmlns:local="clr-namespace:Lemon_App"
 7              xmlns:Forms="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Name="userControl" x:Class="Lemon_App.IMBOX"
 8              mc:Ignorable="d" Loaded="UserControl_Loaded"  SizeChanged="UserControl_SizeChanged">
 9     <Grid>
10         <Border Height="1" VerticalAlignment="Bottom" Background="#FFE6E6E6" Margin="0,0,0,90"/>
11         <TextBox x:Name="textBox1" TextWrapping="Wrap" FontSize="14" BorderThickness="0" BorderBrush="{x:Null}" SelectionBrush="#FF31C27C" KeyDown="textBox1_KeyDown" Height="90" VerticalAlignment="Bottom" Background="{x:Null}"/>
12         <Border BorderThickness="1" Background="#B2007ACC" CornerRadius="5" HorizontalAlignment="Right" Width="57" Height="30" VerticalAlignment="Bottom" Margin="3">
13             <Label x:Name="label" Content="发送" Margin="9.919,1.833,4.331,-1" Foreground="White" MouseDown="label_MouseDown" Height="27.167" VerticalAlignment="Top"/>
14         </Border>
15         <ScrollViewer x:Name="Sllv" PanningMode="Both" Margin="0,0,0,90" BorderBrush="{x:Null}" Template="{DynamicResource SCS}">
16             <WrapPanel x:Name="Robot" Height="Auto"  SizeChanged="Robot_SizeChanged" Width="{Binding ActualWidth, ElementName=userControl, Mode=OneWay}"/>
17         </ScrollViewer>
18     </Grid>
19 </UserControl>

部分事件处理代码:

 1  public IMBOX()
 2         {
 3             InitializeComponent();
 4         }
 5 
 6         private void UserControl_Loaded(object sender, RoutedEventArgs e)
 7         {
 8             Robot.Width = this.ActualWidth;
 9         }
10   private void textBox1_KeyDown(object sender, KeyEventArgs e)
11         {
12             if (e.Key == Key.Enter)
13             {
14                 label_MouseDown(null, null);
15             }
16         }
17 
18         private void Robot_SizeChanged(object sender, SizeChangedEventArgs e)
19         {
20             double d = this.Sllv.ActualHeight + this.Sllv.ViewportHeight + this.Sllv.ExtentHeight;
21             this.Sllv.ScrollToVerticalOffset(d);
22         }
23 
24         private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
25         {
26             Robot.Width = this.ActualWidth;
27             foreach(var o in Robot.Children)
28             {
29                 (o as UserControl).Width = this.ActualWidth;
30             }
31         }
32 //以上负责自适应大小
33 private async void label_MouseDown(object sender, MouseButtonEventArgs e){
34   //待会处理机器人事件时用到
35 }

接着是聊天气泡，可以分为机器人（在左边）、自己（在右边）以下是XAML：

机器人:(名称及头像可以自己定义)

 1 <UserControl
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 6              xmlns:local="clr-namespace:Lemon_App"
 7              x:Class="Lemon_App.Robot"
 8              mc:Ignorable="d" Height="Auto" Width="Auto">
 9     <Grid>
10 
11         <Border x:Name="Image" BorderThickness="0" HorizontalAlignment="Left" Margin="12,12,0,0" Width="30" CornerRadius="50" Height="30" VerticalAlignment="Top">
12             <Border.Background>
13                 <ImageBrush ImageSource="/Lemon App;component/Page/Lemon App Ico.ico"/>
14             </Border.Background>
15             <!--ed:RegularPolygon Fill="White" InnerRadius="0.47211" Margin="5" PointCount="5" Stretch="Fill"/!-->
16         </Border>
17         <Border Width="Auto" Height="Auto" Margin="55,35,0,0" CornerRadius="5" VerticalAlignment="Top" HorizontalAlignment="Left" Background="#FF3399FF">
18             <TextBlock x:Name="Te" Height="Auto" TextWrapping="Wrap" Width="Auto" d:LayoutOverrides="LeftPosition, RightPosition" Cursor="" Margin="6" Foreground="White" FontSize="14" Text="欢迎回来"/>
19         </Border>
20         <TextBlock Margin="50,15,40,35.78" TextWrapping="Wrap" Text="小萌机器人" Foreground="#FF2D2D30"/>
21         <Border HorizontalAlignment="Left" Height="16" Margin="46,38,0,0" VerticalAlignment="Top" Width="10" RenderTransformOrigin="0.5,0.5">
22             <Border.RenderTransform>
23                 <TransformGroup>
24                     <ScaleTransform/>
25                     <SkewTransform/>
26                     <RotateTransform Angle="-60"/>
27                     <TranslateTransform/>
28                 </TransformGroup>
29             </Border.RenderTransform>
30             <Path Data="M68.2,31.8c-2.3-2.3-6.1-2.3-8.4,0l-56,56C0,91.6,2.7,98,8,98h112c5.3,0,8-6.4,4.2-10.2L68.2,31.8z" Fill="#FF3399FF" Stretch="Fill" Margin="0,0,0,-2.912"/>
31         </Border>
32 
33     </Grid>
34 </UserControl>

事件处理代码:

 1     public partial class Robot : UserControl
 2     {
 3         public Robot()
 4         {
 5             InitializeComponent();
 6             RenderOptions.SetBitmapScalingMode(Image, BitmapScalingMode.Fant);
 7         }
 8         public Robot(string Text)
 9         {
10             InitializeComponent();
11             Te.Text = Text;
12             RenderOptions.SetBitmapScalingMode(Image, BitmapScalingMode.Fant);
13         }
14     }

接下来是自己的XAML:

 1 <UserControl
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 6              xmlns:local="clr-namespace:Lemon_App"
 7              x:Class="Lemon_App.User"
 8              mc:Ignorable="d" Height="Auto" Width="Auto" Loaded="UserControl_Loaded">
 9     <Grid>
10 
11         <Border x:Name="bd" BorderThickness="0" HorizontalAlignment="Right" Margin="0,12,12,0" Width="30" CornerRadius="50" Height="30" VerticalAlignment="Top" Background="#FF007ACC"/>
12         <Border Width="Auto" Height="Auto" Margin="0,35,55,0" CornerRadius="5" VerticalAlignment="Top" HorizontalAlignment="Right" Background="#FF3399FF">
13             <TextBlock x:Name="Te" Height="Auto" TextWrapping="Wrap" Width="Auto" d:LayoutOverrides="LeftPosition, RightPosition" Cursor="" Margin="6" Foreground="White" FontSize="14" Text="啦啦啦"/>
14         </Border>
15         <Grid HorizontalAlignment="Right" Height="18" Margin="0,16,45,0" VerticalAlignment="Top" Width="Auto">
16             <Grid.ColumnDefinitions>
17                 <ColumnDefinition Width="Auto"/>
18                 <ColumnDefinition Width="Auto"/>
19             </Grid.ColumnDefinitions>
20             <TextBlock x:Name="UName" Margin="0,0,1.636,0" TextWrapping="Wrap" Text="小萌机器人" Foreground="#FF2D2D30" HorizontalAlignment="Right" Width="Auto"/>
21         </Grid>
22         <Border HorizontalAlignment="Right" Height="16" Margin="0,38,46,0" VerticalAlignment="Top" Width="10" RenderTransformOrigin="0.5,0.5">
23             <Border.RenderTransform>
24                 <TransformGroup>
25                     <RotateTransform Angle="60"/>
26                     <TranslateTransform/>
27                 </TransformGroup>
28             </Border.RenderTransform>
29             <Path Data="M68.2,31.8c-2.3-2.3-6.1-2.3-8.4,0l-56,56C0,91.6,2.7,98,8,98h112c5.3,0,8-6.4,4.2-10.2L68.2,31.8z" Fill="#FF3399FF" Stretch="Fill" Margin="0,0,0,-2.912"/>
30         </Border>
31 
32     </Grid>
33 </UserControl>

事件处理代码:

 1     public partial class User : UserControl
 2     {
 3         public User()
 4         {
 5             InitializeComponent();
 6         }
 7         public User(String Text)
 8         {
 9             InitializeComponent();
10             RenderOptions.SetBitmapScalingMode(bd, BitmapScalingMode.Fant);
11             Te.Text = Text;
12         }
13 
14         private void UserControl_Loaded(object sender, RoutedEventArgs e)
15         {
16             if (System.IO.File.Exists(He.Settings.UserImage))
17             {
18                 var image = new System.Drawing.Bitmap(He.Settings.UserImage);
19                 bd.Background = new ImageBrush(image.ToImageSource());
20             }
21             UName.Text = He.Settings.RobotName;
22         }
23     }

其中的He.Settings.UserImage可以替换成你的图像路径，或直接在XAML中定义

二、编码

我们有了KEY就可以向机器人发送请求惹：

http://www.tuling123.com/openapi/api?key={0}&info={1}&userid={2}

{0} : 你注册的KEY

{1} : 对机器人说的话

{2} :（选填，但最好还是填写，用于辨认用户）用户名称或ID

 

接下来就要对机器人发回的数据进行解码

首先要识别他发回的是什么类型的：（简单的文本或链接）

状态码位于json数据的["code"]处

简单的文本处理：

 1  if ((string)obj["code"] == "100000" || obj["code"].ToString() == "40002")
 2                 {
 3                     User U = new User(textBox1.Text)
 4                     {
 5                         Width = Robot.ActualWidth,Opacity = 0
 6                     };
 7                     Robot Rb = new Robot((string)obj["text"])
 8                     {
 9                         Width = Robot.ActualWidth, Opacity = 0
10                     };
11                     Robot.Children.Add(U);
12                     Robot.Children.Add(Rb);
13                     var b = new DoubleAnimation(1, TimeSpan.FromSeconds(0.2));
14                     U.BeginAnimation(OpacityProperty, b);
15                     Rb.BeginAnimation(OpacityProperty, b);
16                 }

链接处理:

 1  else if ((string)obj["code"] == "200000")
 2                 {
 3                     string i = (string)obj["text"];
 4                     User Uu = new User(textBox1.Text)
 5                     {
 6                         Opacity = 0,
 7                         Width = Robot.ActualWidth
 8                     };
 9                     Lemon_App.Robot Rbu = new Lemon_App.Robot((string)obj["url"] + i)
10                     {
11                         Opacity = 0,
12                         Width = Robot.ActualWidth,
13                         ToolTip = (string)obj["url"].ToString()
14                     };
15                     Rbu.MouseDown += Rbu_MouseDown;
16                     Robot.Children.Add(Uu);
17                     Robot.Children.Add(Rbu);
18                     var b = new DoubleAnimation(1, TimeSpan.FromSeconds(0.2));
19                     Uu.BeginAnimation(OpacityProperty, b);
20                     Rbu.BeginAnimation(OpacityProperty, b);
21                 }

附一只事件处理代码，用于处理用户点击链接时打开浏览器:

1        private void Rbu_MouseDown(object sender, MouseButtonEventArgs e)
2         {
3             Process.Start((sender as Grid).ToolTip.ToString());
4         }

这样我们就完成了编码工作。

三、测试

接下来就可以和机器人愉快地聊天啦o(*￣▽￣*)ブ

测试成功！( •̀ ω •́ )y

 

已更新

本教程示例代码（WPF）：https://github.com/TwilightLemon/Lime

这次的教程到这里就结束啦，如果喜欢就快快关注我吧！

posted @ 2017-07-25 11:14  TwilightLemon  阅读(6880)  评论(6)  编辑  收藏  举报