Open In App

How to Build a ChatGPT Like Image Generator Application in Android?

Last Updated : 01 Feb, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Chat GPT is nowadays one of the famous AI tools which are like a chatbot. This chatbot answers all the queries which are sent to it. In this article, we will be building a simple ChatGPT-like android application in which we will be able to ask any question and from that question, we will be able to get an appropriate response in the form of images within our application. 

 How-to-Build-a-ChatGPT-Image-Generator-Application-in-Android

We have created a sample application we will take a look at its output of it and then we will proceed further to create a new project in android studio. 

Step-By-Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Add the below dependency in your build.gradle file

Below is the dependency for Volley which we will be using to get the data from API. For adding this dependency navigate to the app > Gradle Scripts > build.gradle(app) and add the below dependency in the dependencies section. We have used the Picasso dependency for image loading from the URL. 

// below line is used for volley library and picasso
implementation ‘com.android.volley:volley:1.2.0’
implementation 'com.squareup.picasso:picasso:2.8'

After adding this dependency sync your project and now move toward the AndroidManifest.xml part. 

Step 3: Adding permissions to the internet in the AndroidManifest.xml file

Navigate to the app > AndroidManifest.xml and add the below code to it. 

<!-- permissions for INTERNET -->
<uses-permission android:name="android.permission.INTERNET"/>

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/back_color"
    tools:context=".MainActivity">
  
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/idTILQuery"
        android:layout_alignParentTop="true"
        android:layout_margin="5dp"
        android:padding="5dp">
  
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
  
            <!-- text view for displaying question-->
            <TextView
                android:id="@+id/idTVQuestion"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="30dp"
                android:padding="4dp"
                android:text="Question"
                android:textAlignment="center"
                android:textColor="@color/white"
                android:textSize="17sp" />
  
            <!-- Image view for displaying response-->
            <ImageView
                android:id="@+id/idIVImage"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_margin="10dp" />
  
        </LinearLayout>
  
    </ScrollView>
    <!-- text field for asking question-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/idTILQuery"
        style="@style/TextInputLayoutStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="5dp"
        android:hint="Enter your query to generate image"
        android:padding="5dp"
        android:textColorHint="@color/white"
        app:hintTextColor="@color/white">
  
        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/idEdtQuery"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/edt_back_color"
            android:drawableEnd="@drawable/ic_send"
            android:drawableTint="@color/white"
            android:ems="10"
            android:imeOptions="actionSend"
            android:importantForAutofill="no"
            android:inputType="textEmailAddress"
            android:textColor="@color/white"
            android:textColorHint="@color/white"
            android:textSize="14sp" />
    </com.google.android.material.textfield.TextInputLayout>
</RelativeLayout>


Step 5: Generating bearer token for using the API.

Navigate to the below URL and simply sign up with your email and password. On this screen click on Create a new secret key to generate your new key. Once your key is generated that we have to use it as a token for making our API key.

Step 6: Working with MainActivity.kt file.

Navigate to app > java > your app’s package name > MainActivity.kt file and add the below code to it. Comments are added in the code to get to know it in detail. 

Kotlin




import android.R.attr
import android.annotation.SuppressLint
import android.app.StatusBarManager
import android.content.ComponentName
import android.content.Context
import android.content.Intent
import android.content.pm.PackageManager
import android.graphics.drawable.Icon
import android.net.Uri
import android.net.wifi.WifiManager
import android.os.Build
import android.os.Bundle
import android.provider.MediaStore
import android.util.Log
import android.view.inputmethod.EditorInfo
import android.widget.Button
import android.widget.ImageView
import android.widget.TextView
import android.widget.Toast
import androidx.activity.result.ActivityResultLauncher
import androidx.activity.result.contract.ActivityResultContracts
import androidx.appcompat.app.AppCompatActivity
import androidx.core.content.ContextCompat
import com.android.volley.RequestQueue
import com.android.volley.Response
import com.android.volley.RetryPolicy
import com.android.volley.VolleyError
import com.android.volley.toolbox.JsonObjectRequest
import com.android.volley.toolbox.Volley
import com.google.android.material.dialog.MaterialAlertDialogBuilder
import com.google.android.material.textfield.TextInputEditText
import com.squareup.picasso.Picasso
import org.json.JSONObject
import java.util.jar.Manifest
  
class MainActivity : AppCompatActivity() {
  
    // creating variables on below line.
    lateinit var imageIV: ImageView
    lateinit var questionTV: TextView
    lateinit var queryEdt: TextInputEditText
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // initializing variables on below line.
        imageIV = findViewById(R.id.idIVImage)
        questionTV = findViewById(R.id.idTVQuestion)
        queryEdt = findViewById(R.id.idEdtQuery)
  
        // adding editor action listener for edit text on below line.
        queryEdt.setOnEditorActionListener(TextView.OnEditorActionListener { v, actionId, event ->
            if (actionId == EditorInfo.IME_ACTION_SEND) {
                // setting response tv on below line.
                // validating text
                if (queryEdt.text.toString().length > 0) {
                    // calling get response to get the response.
                    getResponse(queryEdt.text.toString())
                } else {
                    Toast.makeText(this, "Please enter your query..", Toast.LENGTH_SHORT).show()
                }
                return@OnEditorActionListener true
            }
            false
        })
    }
  
    private fun getResponse(query: String) {
        // setting text on for question on below line.
        questionTV.text = query
        queryEdt.setText("")
        // creating a queue for request queue.
        val queue: RequestQueue = Volley.newRequestQueue(applicationContext)
        // creating a json object on below line.
        val jsonObject: JSONObject? = JSONObject()
        // adding params to json object.
        jsonObject?.put("prompt", query)
        jsonObject?.put("n", 1)
        jsonObject?.put("size", "256x256")
  
        // on below line making json object request.
        val postRequest: JsonObjectRequest =
            // on below line making json object request.
            object : JsonObjectRequest(Method.POST, url, jsonObject,
                Response.Listener { response ->
                    // on below line getting response message and setting it to image view.
                    var imageURL: String =
                        response.getJSONArray("data").getJSONObject(0).getString("url")
                    imageURL = imageURL.replace("\\", "");
                    // using picasso to load image from url in image view
                    Picasso.get().load(imageURL).into(imageIV)
                },
                // adding on error listener
                Response.ErrorListener { error ->
                    Log.e("TAGAPI", "Error is : " + error.message + "\n" + error)
                }) {
                override fun getHeaders(): kotlin.collections.MutableMap<kotlin.String, kotlin.String> {
                    val params: MutableMap<String, String> = HashMap()
                    // adding headers on below line.
                    params["Content-Type"] = "application/json"
                    params["Authorization"] =
                        "Bearer Enter your key"
                    return params;
                }
            }
        // on below line adding retry policy for our request.
        postRequest.setRetryPolicy(object : RetryPolicy {
            override fun getCurrentTimeout(): Int {
                return 50000
            }
  
            override fun getCurrentRetryCount(): Int {
                return 50000
            }
  
            @Throws(VolleyError::class)
            override fun retry(error: VolleyError) {
            }
        })
        // on below line adding our request to queue.
        queue.add(postRequest)
    }
}


Output:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads