How to show different prefabs for different images

Hi I am trying to augment different prefabs for different images say around 20 models.Currently testing with 2 models for 2 images in AugmentedImage sample scene.I have added the script AugmentedImageVisualizer.cs to each prefab.I drag and dropped the two models to the script.In the AugmenetedImageExampleController.cs I have made the following changes.

namespace GoogleARCore.Examples.AugmentedImage
{
    using System.Collections.Generic;
    using System.Runtime.InteropServices;
    using GoogleARCore;
    using UnityEngine;
    using UnityEngine.UI;

/// <summary>
/// Controller for AugmentedImage example.
/// </summary>
public class AugmentedImageExampleController : MonoBehaviour
{
    /// <summary>
    /// A prefab for visualizing an AugmentedImage.
    /// </summary>
    //  public AugmentedImageVisualizer AugmentedImageVisualizerPrefab;
    public List<AugmentedImageVisualizer> AugmentedImageVisualizerPrefab = new List<AugmentedImageVisualizer>();




    /// <summary>
    /// The overlay containing the fit to scan user guide.
    /// </summary>
    public GameObject FitToScanOverlay;

    private Dictionary<int, AugmentedImageVisualizer> m_Visualizers
        = new Dictionary<int, AugmentedImageVisualizer>();

    private List<AugmentedImage> m_TempAugmentedImages = new List<AugmentedImage>();

    /// <summary>
    /// The Unity Update method.
    /// </summary>
    public void Update()
    {


        // Exit the app when the 'back' button is pressed.
        if (Input.GetKey(KeyCode.Escape))
        {
            Application.Quit();
        }

        // Check that motion tracking is tracking.
        if (Session.Status != SessionStatus.Tracking)
        {
            return;
        }

        // Get updated augmented images for this frame.
        Session.GetTrackables<AugmentedImage>(m_TempAugmentedImages, TrackableQueryFilter.Updated);

        // Create visualizers and anchors for updated augmented images that are tracking and do not previously
        // have a visualizer. Remove visualizers for stopped images.
        foreach (var image in m_TempAugmentedImages)
        {
            AugmentedImageVisualizer visualizer = null;
            m_Visualizers.TryGetValue(image.DatabaseIndex, out visualizer);
            if (image.TrackingState == TrackingState.Tracking && visualizer == null)
            {
                // Create an anchor to ensure that ARCore keeps tracking this augmented image.
                Anchor anchor = image.CreateAnchor(image.CenterPose);
                visualizer = (AugmentedImageVisualizer)Instantiate(AugmentedImageVisualizerPrefab[image.DatabaseIndex], anchor.transform);
                visualizer.Image = image;
                m_Visualizers.Add(image.DatabaseIndex, visualizer);


            }
            else if (image.TrackingState == TrackingState.Stopped && visualizer != null)
            {
                m_Visualizers.Remove(image.DatabaseIndex);
                GameObject.Destroy(visualizer.gameObject);

            }

        }

        // Show the fit-to-scan overlay if there are no images that are Tracking.
        foreach (var visualizer in m_Visualizers.Values)
        {
            if (visualizer.Image.TrackingState == TrackingState.Tracking)
            {
                FitToScanOverlay.SetActive(false);
                return;
            }
        }

        FitToScanOverlay.SetActive(true);
    }
}
}

My unity screen looks like below

Added Augmented Image Visualizer script to the prefabs to Rabbit prefab and Monkey prefab.Image given below

This is how it should be done?The problem once the model appears it will not disappear.So when I show the next image anther model comes on top of it.How to hide the model when the image is not tracked?

In the AugmentedImageControllerExample.cs we are using the below code.Still I dont understand why the models are not disappearing after they lost tracking of the image.

else if (image.TrackingState == TrackingState.Stopped && visualizer != null)
            {
                m_Visualizers.Remove(image.DatabaseIndex);
                GameObject.Destroy(visualizer.gameObject);

            }

AugmentedImageVisualizer.cs code given below?I have referred this Link.

namespace GoogleARCore.Examples.AugmentedImage
{
    using System;
    using System.Collections.Generic;
    using System.Runtime.InteropServices;
    using GoogleARCore;
    using GoogleARCoreInternal;
    using UnityEngine;
    using UnityEngine.UI;

/// <summary>
/// Uses 4 frame corner objects to visualize an AugmentedImage.
/// </summary>
public class AugmentedImageVisualizer : MonoBehaviour
{
    /// <summary>
    /// The AugmentedImage to visualize.
    /// </summary>
    public AugmentedImage Image;


    public GameObject[] Models;





    private void Start()
    {

    }



    /// <summary>
    /// A model for the lower left corner of the frame to place when an image is detected.
    /// </summary>
    // public GameObject FrameLowerLeft;

    /// <summary>
    /// A model for the lower right corner of the frame to place when an image is detected.
    /// </summary>
    // public GameObject FrameLowerRight;

    /// <summary>
    /// A model for the upper left corner of the frame to place when an image is detected.
    /// </summary>
    // public GameObject FrameUpperLeft;

    /// <summary>
    /// A model for the upper right corner of the frame to place when an image is detected.
    /// </summary>
    //  public GameObject FrameUpperRight;

    /// <summary>
    /// The Unity Update method.
    /// </summary>
    public void Update()
    {
         if (Image == null || Image.TrackingState != TrackingState.Tracking)

        {
            Models[Image.DatabaseIndex].SetActive(false);

            //Models[0].SetActive(false);
            //Models[1].SetActive(false);

            return;
        }

        if (Image == null || Image.TrackingState == TrackingState.Stopped)
            {
            Models[Image.DatabaseIndex].SetActive(false);

            //Models[0].SetActive(false);
            //Models[1].SetActive(false);

            return;

             }

        if (Image == null || Image.TrackingState == TrackingState.Paused)
        {
            Models[Image.DatabaseIndex].SetActive(false);

            //Models[0].SetActive(false);
            //Models[1].SetActive(false);

            return;

        }



        Models[Image.DatabaseIndex].SetActive(true);


    }
}
}

The problem is, that in your update function you set always both models active true. But you should only set the model active you are tracking! So like said in the comment you should use the AugmentedImage DatabseIndex. For example your Models[0] is the model coresponding to the first Image in the Database and the Models[1] is coresponding to the second Image. So instead of:

// Wrong code, because you're always setting both models active
Models[0].SetActive(true);
Models[1].SetActive(true);

you can write:

// Only set the tracking Image active
Models[Image.DatabaseIndex].SetActive(true);

Another thing is in your if (Image != null && Image.TrackingState == TrackingState.Paused) and if (Image != null && Image.TrackingState == TrackingState.Stopped) you could write a return; after deactivating your model, so that you quit your Update function and don't set the model active again.