日常API之图灵聊天机器人

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

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

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

一、布局

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

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

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

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

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

 <UserControl
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="clr-namespace:Lemon_App"
              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"
              mc:Ignorable="d" Loaded="UserControl_Loaded"  SizeChanged="UserControl_SizeChanged">
     <Grid>
         <Border Height="1" VerticalAlignment="Bottom" Background="#FFE6E6E6" Margin="0,0,0,90"/>
         <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}"/>
         <Border BorderThickness="1" Background="#B2007ACC" CornerRadius="5" HorizontalAlignment="Right" Width="57" Height="30" VerticalAlignment="Bottom" Margin="3">
             <Label x:Name="label" Content="发送" Margin="9.919,1.833,4.331,-1" Foreground="White" MouseDown="label_MouseDown" Height="27.167" VerticalAlignment="Top"/>
         </Border>
         <ScrollViewer x:Name="Sllv" PanningMode="Both" Margin="0,0,0,90" BorderBrush="{x:Null}" Template="{DynamicResource SCS}">
             <WrapPanel x:Name="Robot" Height="Auto"  SizeChanged="Robot_SizeChanged" Width="{Binding ActualWidth, ElementName=userControl, Mode=OneWay}"/>
         </ScrollViewer>
     </Grid>
 </UserControl>

部分事件处理代码:

  public IMBOX()
         {
             InitializeComponent();
         }

         private void UserControl_Loaded(object sender, RoutedEventArgs e)
         {
             Robot.Width = this.ActualWidth;
         }
   private void textBox1_KeyDown(object sender, KeyEventArgs e)
         {
             if (e.Key == Key.Enter)
             {
                 label_MouseDown(null, null);
             }
         }

         private void Robot_SizeChanged(object sender, SizeChangedEventArgs e)
         {
             double d = this.Sllv.ActualHeight + this.Sllv.ViewportHeight + this.Sllv.ExtentHeight;
             this.Sllv.ScrollToVerticalOffset(d);
         }

         private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
         {
             Robot.Width = this.ActualWidth;
             foreach(var o in Robot.Children)
             {
                 (o as UserControl).Width = this.ActualWidth;
             }
         }
 //以上负责自适应大小
 private async void label_MouseDown(object sender, MouseButtonEventArgs e){
   //待会处理机器人事件时用到
 }

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

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

 <UserControl
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="clr-namespace:Lemon_App"
              x:Class="Lemon_App.Robot"
              mc:Ignorable="d" Height="Auto" Width="Auto">
     <Grid>

         <Border x:Name="Image" BorderThickness="0" HorizontalAlignment="Left" Margin="12,12,0,0" Width="30" CornerRadius="50" Height="30" VerticalAlignment="Top">
             <Border.Background>
                 <ImageBrush ImageSource="/Lemon App;component/Page/Lemon App Ico.ico"/>
             </Border.Background>
             <!--ed:RegularPolygon Fill="White" InnerRadius="0.47211" Margin="5" PointCount="5" Stretch="Fill"/!-->
         </Border>
         <Border Width="Auto" Height="Auto" Margin="55,35,0,0" CornerRadius="5" VerticalAlignment="Top" HorizontalAlignment="Left" Background="#FF3399FF">
             <TextBlock x:Name="Te" Height="Auto" TextWrapping="Wrap" Width="Auto" d:LayoutOverrides="LeftPosition, RightPosition" Cursor="" Margin="6" Foreground="White" FontSize="14" Text="欢迎回来"/>
         </Border>
         <TextBlock Margin="50,15,40,35.78" TextWrapping="Wrap" Text="小萌机器人" Foreground="#FF2D2D30"/>
         <Border HorizontalAlignment="Left" Height="16" Margin="46,38,0,0" VerticalAlignment="Top" Width="10" RenderTransformOrigin="0.5,0.5">
             <Border.RenderTransform>
                 <TransformGroup>
                     <ScaleTransform/>
                     <SkewTransform/>
                     <RotateTransform Angle="-60"/>
                     <TranslateTransform/>
                 </TransformGroup>
             </Border.RenderTransform>
             <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"/>
         </Border>

     </Grid>
 </UserControl>

事件处理代码:

     public partial class Robot : UserControl
     {
         public Robot()
         {
             InitializeComponent();
             RenderOptions.SetBitmapScalingMode(Image, BitmapScalingMode.Fant);
         }
         public Robot(string Text)
         {
             InitializeComponent();
             Te.Text = Text;
             RenderOptions.SetBitmapScalingMode(Image, BitmapScalingMode.Fant);
         }
     }

接下来是自己的XAML:

 <UserControl
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="clr-namespace:Lemon_App"
              x:Class="Lemon_App.User"
              mc:Ignorable="d" Height="Auto" Width="Auto" Loaded="UserControl_Loaded">
     <Grid>

         <Border x:Name="bd" BorderThickness="0" HorizontalAlignment="Right" Margin="0,12,12,0" Width="30" CornerRadius="50" Height="30" VerticalAlignment="Top" Background="#FF007ACC"/>
         <Border Width="Auto" Height="Auto" Margin="0,35,55,0" CornerRadius="5" VerticalAlignment="Top" HorizontalAlignment="Right" Background="#FF3399FF">
             <TextBlock x:Name="Te" Height="Auto" TextWrapping="Wrap" Width="Auto" d:LayoutOverrides="LeftPosition, RightPosition" Cursor="" Margin="6" Foreground="White" FontSize="14" Text="啦啦啦"/>
         </Border>
         <Grid HorizontalAlignment="Right" Height="18" Margin="0,16,45,0" VerticalAlignment="Top" Width="Auto">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto"/>
                 <ColumnDefinition Width="Auto"/>
             </Grid.ColumnDefinitions>
             <TextBlock x:Name="UName" Margin="0,0,1.636,0" TextWrapping="Wrap" Text="小萌机器人" Foreground="#FF2D2D30" HorizontalAlignment="Right" Width="Auto"/>
         </Grid>
         <Border HorizontalAlignment="Right" Height="16" Margin="0,38,46,0" VerticalAlignment="Top" Width="10" RenderTransformOrigin="0.5,0.5">
             <Border.RenderTransform>
                 <TransformGroup>
                     <RotateTransform Angle="60"/>
                     <TranslateTransform/>
                 </TransformGroup>
             </Border.RenderTransform>
             <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"/>
         </Border>

     </Grid>
 </UserControl>

事件处理代码:

     public partial class User : UserControl
     {
         public User()
         {
             InitializeComponent();
         }
         public User(String Text)
         {
             InitializeComponent();
             RenderOptions.SetBitmapScalingMode(bd, BitmapScalingMode.Fant);
             Te.Text = Text;
         }

         private void UserControl_Loaded(object sender, RoutedEventArgs e)
         {
             if (System.IO.File.Exists(He.Settings.UserImage))
             {
                 var image = new System.Drawing.Bitmap(He.Settings.UserImage);
                 bd.Background = new ImageBrush(image.ToImageSource());
             }
             UName.Text = He.Settings.RobotName;
         }
     }

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

二、编码

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

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

{0} : 你注册的KEY

{1} : 对机器人说的话

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

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

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

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

简单的文本处理：

  if ((string)obj["code"] == "" || obj["code"].ToString() == "")
                 {
                     User U = new User(textBox1.Text)
                     {
                         Width = Robot.ActualWidth,Opacity =
                     };
                     Robot Rb = new Robot((string)obj["text"])
                     {
                         Width = Robot.ActualWidth, Opacity =
                     };
                     Robot.Children.Add(U);
                     Robot.Children.Add(Rb);
                     var b = new DoubleAnimation(, TimeSpan.FromSeconds(0.2));
                     U.BeginAnimation(OpacityProperty, b);
                     Rb.BeginAnimation(OpacityProperty, b);
                 }

链接处理:

  else if ((string)obj["code"] == "")
                 {
                     string i = (string)obj["text"];
                     User Uu = new User(textBox1.Text)
                     {
                         Opacity = ,
                         Width = Robot.ActualWidth
                     };
                     Lemon_App.Robot Rbu = new Lemon_App.Robot((string)obj["url"] + i)
                     {
                         Opacity = ,
                         Width = Robot.ActualWidth,
                         ToolTip = (string)obj["url"].ToString()
                     };
                     Rbu.MouseDown += Rbu_MouseDown;
                     Robot.Children.Add(Uu);
                     Robot.Children.Add(Rbu);
                     var b = new DoubleAnimation(, TimeSpan.FromSeconds(0.2));
                     Uu.BeginAnimation(OpacityProperty, b);
                     Rbu.BeginAnimation(OpacityProperty, b);
                 }

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

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

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

三、测试

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

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

已更新

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

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